Static site generation
Generate complete static pages at build time or on a server for static site generation.
React 19+ · Function
prerender asynchronously generates static HTML for a React tree as a Web Stream. It waits for data required by Suspense before resolving, making it suitable for static site generation.
Call prerender from react-dom/static with a React tree and optional static-generation settings. It asynchronously produces a Web Stream containing HTML after data needed by Suspense has loaded; return that stream or consume it as required by the hosting environment.
prerender(reactNode, options?)| Name | Type | Description |
|---|---|---|
reactNode | ReactNode | The React node to render as HTML, such as a JSX element representing the application or full document. |
options | object | Optional static-generation settings, including bootstrap script paths and an abort signal. |
A Promise resolving to an object containing prelude, a Readable Web Stream of HTML, and postponed, an opaque JSON-serializable state when rendering is incomplete; otherwise postponed is null.
react-dom/static to produce static HTML through a Readable Web Stream.prerender when your server integration requires a Node.js stream.import { prerender } from "react-dom/static";
import { App } from "./App";
export async function GET() {
const { prelude } = await prerender(<App />, {
bootstrapScripts: ["/main.js"],
});
return new Response(prelude, {
headers: { "content-type": "text/html" },
});
}This server handler generates the complete static document as a Web Stream and includes the client bootstrap script so the browser can hydrate it.
Generate complete static pages at build time or on a server for static site generation.
Render pages whose data dependencies are expressed with Suspense before emitting HTML.
Return HTML progressively through a Web Stream or materialize it as a string.
prerender solve compared with renderToString?prerender renders a React tree to static HTML through a Web Stream and returns a Promise. Unlike renderToString, it waits for all data to load before resolving, which makes it appropriate for static generation involving Suspense.
Follow-up: How would you support a Node.js stream instead? Use prerenderToNodeStream, because the Web Stream API is not the matching output interface.
prerender?The first argument is the React node to render, while the optional second argument configures static generation, such as bootstrapScripts. The result is destructured asynchronously because the API returns a Promise.
Follow-up: What should happen to the returned prelude? It can be sent in chunks as a Web Stream or read completely into a string before responding.
The server-generated markup must be hydrated on the client with hydrateRoot to become interactive. The bootstrap script option helps load the client-side JavaScript needed for that process.
Follow-up: Why is prerender useful for static site generation? It waits for data before producing the static HTML, including data accessed through Suspense.
prerenderToNodeStreamrenderToStringresumeresumeAndPrerenderhydrateRoot