resumeAndPrerender – React (original) (raw)
resumeAndPrerender continues a prerendered React tree to a static HTML string using a Web Stream.
const { prelude,postpone } = await resumeAndPrerender(reactNode, postponedState, options?)
Note
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.
Parameters
reactNode: The React node you calledprerender(or a previousresumeAndPrerender) with. For example, a JSX element like<App />. It is expected to represent the entire document, so theAppcomponent should render the<html>tag.postponedState: The opaquepostponeobject 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 callsconsole.error. If you override it to log crash reports, make sure that you still callconsole.error.
- optional
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 ifprerenderis 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.
Note
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
Further reading
resumeAndPrerender behaves similarly to prerender but can be used to continue a previously started prerendering process that was aborted. For more information about resuming a prerendered tree, see the resume documentation.