Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST

React 19+ · Function

prerender

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.

Since
19.0

How it works

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.

Syntax

prerender(reactNode, options?)

Parameters

NameTypeDescription
reactNodeReactNodeThe React node to render as HTML, such as a JSX element representing the application or full document.
optionsobjectOptional static-generation settings, including bootstrap script paths and an abort signal.

Returns

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.

Key points

  • Import it from react-dom/static to produce static HTML through a Readable Web Stream.
  • Its primary role is static site generation rather than progressively streaming an actively loading page.
  • The returned Promise resolves only after required data has loaded.
  • It can generate complete pages whose content depends on Suspense-enabled data fetching.
  • The resulting stream supports either chunked responses or conversion to a complete HTML string.
  • Invoke the function on the server with the application root or document component.

Common mistakes

  • Use this API only in an environment that supports Web Streams; for Node.js, choose the Node.js stream counterpart instead.
  • Do not use prerender when your server integration requires a Node.js stream.
  • The generated HTML is not interactive until the client hydrates it.

Example: Prerender a static document

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.

When to use it

Static site generation

Generate complete static pages at build time or on a server for static site generation.

Suspense-aware page generation

Render pages whose data dependencies are expressed with Suspense before emitting HTML.

Web-stream responses

Return HTML progressively through a Web Stream or materialize it as a string.

Interview questions

QWhat problem does 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.

QWhat are the main inputs and output of 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.

QHow does prerendered HTML become interactive?

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.

  • prerenderToNodeStream
  • renderToString
  • resume
  • resumeAndPrerender
  • hydrateRoot

Source: prerender – React. Checked 2026-10-15.