resumeAndPrerender

resumeAndPrerender continues a prerendered React tree to a static HTML string using a Web Stream.

const { prelude,postpone } = await resumeAndPrerender(reactNode, postponedState, options?)

Reference
- resumeAndPrerender(reactNode, postponedState, options?)
Usage
- Further reading

ملاحظة

This API depends on Web Streams. For Node.js, use resumeAndPrerenderToNodeStream instead.

Reference

`resumeAndPrerender(reactNode, postponedState, options?)`

Call resumeAndPrerender to continue a prerendered React tree to a static HTML string.

import { resumeAndPrerender } from 'react-dom/static';
import { getPostponedState } from 'storage';

async function handler(request, response) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerender(<App />, postponedState, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}

On the client, call hydrateRoot to make the server-generated HTML interactive.

See more examples below.

Parameters

reactNode: The React node you called prerender (or a previous resumeAndPrerender) with. For example, a JSX element like <App />. It is expected to represent the entire document, so the App component should render the <html> tag.
postponedState: The opaque postpone object returned from a prerender API, loaded from wherever you stored it (e.g. redis, a file, or S3).
optional options: An object with streaming options.
- optional signal: An abort signal that lets you abort server rendering and render the rest on the client.
- optional onError: A callback that fires whenever there is a server error, whether recoverable or not. By default, this only calls console.error. If you override it to log crash reports, make sure that you still call console.error.

Returns

prerender returns a Promise:

If rendering the is successful, the Promise will resolve to an object containing:
- prelude: a Web Stream of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
- postponed: an JSON-serializeable, opaque object that can be passed to resume or resumeAndPrerender if prerender is aborted.
If rendering fails, the Promise will be rejected. Use this to output a fallback shell.

Caveats

nonce is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with CSP it would be inappropriate and insecure to include the nonce value in the prerender itself.

ملاحظة

When should I use `resumeAndPrerender`?

The static resumeAndPrerender API is used for static server-side generation (SSG). Unlike renderToString, resumeAndPrerender waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like renderToReadableStream.

resumeAndPrerender can be aborted and later either continued with another resumeAndPrerender or resumed with resume to support partial pre-rendering.

Usage

import { resumeAndPrerender } from 'react-dom/static';
import { getPostponedState } from 'storage';

async function handler(request, response) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerender(<App />, postponedState, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}

import { resumeAndPrerender } from 'react-dom/static'; import { getPostponedState } from 'storage'; async function handler(request, response) { const postponedState = getPostponedState(request); const { prelude } = await resumeAndPrerender(<App />, postponedState, { bootstrapScripts: ['/main.js'] }); return new Response(prelude, { headers: { 'content-type': 'text/html' }, }); }

On the client, call hydrateRoot to make the server-generated HTML interactive.

Parameters

reactNode: The React node you called prerender (or a previous resumeAndPrerender) with. For example, a JSX element like <App />. It is expected to represent the entire document, so the App component should render the <html> tag.

postponedState: The opaque postpone object returned from a prerender API, loaded from wherever you stored it (e.g. redis, a file, or S3).

optional options: An object with streaming options.

optional signal: An abort signal that lets you abort server rendering and render the rest on the client.
optional onError: A callback that fires whenever there is a server error, whether recoverable or not. By default, this only calls console.error. If you override it to log crash reports, make sure that you still call console.error.

Returns

prerender returns a Promise:

If rendering the is successful, the Promise will resolve to an object containing:

prelude: a Web Stream of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
postponed: an JSON-serializeable, opaque object that can be passed to resume or resumeAndPrerender if prerender is aborted.

If rendering fails, the Promise will be rejected. Use this to output a fallback shell.

Caveats

ملاحظة

When should I use `resumeAndPrerender`?

resumeAndPrerender can be aborted and later either continued with another resumeAndPrerender or resumed with resume to support partial pre-rendering.

resumeAndPrerender

ملاحظة

Reference

`resumeAndPrerender(reactNode, postponedState, options?)`

Parameters

Returns

Caveats

ملاحظة

When should I use `resumeAndPrerender`?

Usage

Further reading

react@19.2

react-dom@19.2

React Compiler

React DevTools

eslint-plugin-react-hooks

قواعد React (Rules of React)

React Server Components

Legacy APIs

resumeAndPrerender

ملاحظة

Reference

`resumeAndPrerender(reactNode, postponedState, options?)`

Parameters

Returns

Caveats

ملاحظة

When should I use `resumeAndPrerender`?

Usage

Further reading

resumeAndPrerender

ملاحظة

Reference

resumeAndPrerender(reactNode, postponedState, options?)

Parameters

Returns

Caveats

ملاحظة

When should I use resumeAndPrerender?

Usage

Further reading

react@19.2

react-dom@19.2

React Compiler

React DevTools

eslint-plugin-react-hooks

قواعد React (Rules of React)

React Server Components

Legacy APIs

resumeAndPrerender

ملاحظة

Reference

resumeAndPrerender(reactNode, postponedState, options?)

Parameters

Returns

Caveats

ملاحظة

When should I use resumeAndPrerender?

Usage

Further reading

`resumeAndPrerender(reactNode, postponedState, options?)`

When should I use `resumeAndPrerender`?

`resumeAndPrerender(reactNode, postponedState, options?)`

When should I use `resumeAndPrerender`?