Static site generation
A Node.js server generates complete HTML files or responses during a build or request.
React 19+ · Function
Pre-renders a complete React tree to static HTML through a Node.js Stream. It waits for required data before resolving, making it useful for static site generation.
Import the function from react-dom/static and await it with the complete React document plus optional streaming settings. It waits for data required by Suspense before resolving, then returns an HTML Node.js stream and optional postponed state; pipe the stream to a response or consume it as text. Hydrate the emitted markup on the client when interactivity is needed.
const { prelude, postponed } = await prerenderToNodeStream(reactNode, options?)| Name | Type | Description |
|---|---|---|
reactNode | ReactNode | React node representing the complete document to render, such as <App />. |
options | object | Optional object containing streaming settings such as bootstrapScripts, maxHeadersLength, and namespaceURI. |
A Promise resolving to an object with prelude, a Node.js HTML stream, and postponed, an opaque JSON-serializable continuation state.
prelude value contains the generated HTML and can be piped to a response in chunks.postponed value can preserve an unfinished prerender for later continuation.bootstrapScripts to emit page scripts, including a client entry point used for hydration.maxHeadersLength limits header content supplied to onHeaders and defaults to 2000 UTF-16 code units.namespaceURI when the root output is SVG or MathML rather than ordinary HTML.prerender instead.<html> element, rather than only an application fragment.import { prerenderToNodeStream } from "react-dom/static";
import App from "./App.js";
const { prelude } = await prerenderToNodeStream(<App />, {
bootstrapScripts: ["/main.js"],
});
prelude.pipe(response);Pre-renders the complete app as static HTML and pipes the resulting Node.js stream to an HTTP response.
A Node.js server generates complete HTML files or responses during a build or request.
A Node.js HTTP handler sends generated markup through a stream.
A prerender is interrupted and must continue later through React's resume APIs.
prerenderToNodeStream return?It is a static server-rendering API from react-dom/static that returns a Promise. The resolved prelude is a Node.js HTML stream, while postponed is serializable state for continuing an incomplete prerender.
Follow-up: How would you choose between this and prerender? Use this function for Node.js Streams; use prerender in Web Streams environments such as modern edge runtimes.
It waits for data needed by Suspense before the Promise resolves, making it suitable for static site generation. Unlike streaming SSR APIs, it does not progressively emit content as that data arrives.
Follow-up: Why might it be preferable to renderToString? It supports static generation that waits for asynchronous data instead of failing to represent unfinished Suspense content.
The React node should represent the entire document, so the root application should render <html>. Optional bootstrapScripts adds script URLs to the generated page, commonly including the script that calls hydrateRoot.
Follow-up: What must happen after delivery to make the page interactive? Load the bootstrap script and hydrate the server-generated markup with hydrateRoot.
prerenderresumeToPipeableStreamresumeAndPrerenderToNodeStreamhydrateRootrenderToPipeableStream