Do React Server Components and SSR Options Replace Next.js for Sitecore?
The React framework continues to improve its Server Side Rendering capabilities, and with React 19, is introducing Server Components to further launch into the SSR space. With this in mind, do React Server Components and SSR options replace Next.js for Sitecore XM Cloud/Vercel hosted applications?
Contents
Why Do We Need Server Side Rendering
In its simplest form, Server Side Rendering (SSR) creates an HTML version of your page on request. The value of SSR is that this output can be cached for fast availability and SEO purposes. This is especially critical with a Single Page Application Framework like React, as you can’t index an SPA and need individual “pages” for Google and other browsers to crawl.
Pre Next.js SSR
Previous to Next.js taking the lead in offering Server Side Rendering on top of a ton of other useful features (read more about Next.js here: https://nextjs.org/), there were tools like Prerender.io to create static HTML pages from your JavaScript application. The process of Server Side Rendering is generally referenced as HTML Streaming (or Dynamic HTML Streaming). HTML Streaming is a key term we will revisit in this article.
Next.Js and Vercel with Sitecore XM Cloud
Given the need for Server Side Rendering and the tight coupling of React with Next.js, Sitecore embraced Next.js as a tool of choice for headless Sitecore with scalable delivery via Vercel. Please note that Sitecore XM’s Experience Edge exposes an GraphQL API and can be tightly integrated with Vercel, but Vercel is not required for running XM Cloud. It is one of several hosting options, including using a Sitecore JSS app hosted on Node.js.
React Server Components and SSR
Given that you can develop and deploy Sitecore JSS Apps pulling from Experience Edge, and host them on Node.js, its worthwhile to evaluate if a non Next.js option may be appropriate for your needs. This is where React 19 (Release Candidate as of this writing) with its React Server Components come into play. Specifically:
Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server… The rendered output can then be server-side rendered (SSR) to HTML and uploaded to a CDN. When the app loads, the client will not see the original
Page
component, or the expensive libraries for rendering the markdown. The client will only see the rendered output.
This matters as using React based SSR via the renderToPipeableStream (part of React-Dom package) can provide HTML Streaming to Node.js. Coupling Server Components and Reacts SSR may meet your needs, but requires careful testing and analysis.
Conclusion
React continues to move towards a full point to point framework including delivery without Next.js. However, Next.js offers far more than just Server Side Rendering and given the scale of Vercel, it requires careful consideration and pro/con listing to decide to fully embrace SSR via React.
If you decide that Next.js still offers what you need, bear in mind that you don’t have to deploy your Sitecore based Next.js to Vercel and can leverage other hosting options such as Node.js (bearing in mind that scalability will need to be architected for ex. multiple App Services running Node.js with Azure Traffic Manager).