react-18-ssr

A hands on project that builds React 18 server-side rendering from the ground up, using the new Suspense based architecture, a Koa server, and ReactDOM render methods.

The author explains that after React v18 was published, they wanted to build an SSR app once with the new APIs, having always used Next.js for server-side rendering before. The project is presented as a hands on way to understand the new architecture rather than a finished product. It is written in TypeScript.

The README says React v18 introduces a new SSR architecture. Thanks to the new Suspense API, the process of SSR is no longer waterfall-like, and two major SSR features are unlocked by that change. Suspense is framed as the key enabler for the improved server rendering behavior.

The README walks through web app history to set up the problem. In the past, servers rendered HTML for each request in what someone called a multiple page application. Single page applications route on the client without server requests, which gives a better user experience but is not SEO friendly and makes the first paint longer. Universal hybrid apps combine both benefits, using server-side rendering while keeping client routing.

The implementation needs a node server to render dehydrated React elements and uses ReactDOM.hydrate to make the DOM interactive. The steps include setting up a Koa server for rendering, using ReactDOMServer methods like renderToString and renderToPipeableStream, and using ReactDOM.hydrate. Routing uses react-router-dom with BrowserRoutes and StaticRoutes. For code splitting, the most basic approach is dynamic import, since common bundlers support chunking based on it. The README also mentions React Suspense with React.lazy, noting that renderToPipeableStream is required for that path, and links to React 18 working group discussions about SSR.

It is a learning project rather than a template for production. The README walks from web app history to implementation steps, with code splitting and React 18 working group links at the end.

• Source 1 · Project repository
• Source 2 · README