Document

[["$r","MaxWidth","40",{"children":[["$r","Intro",null,{"children":[["$r","p",null,{"children":[["$r","code",null,{"children":"resume"}]," streams a pre-rendered React tree to a ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream","target":"_blank","rel":"nofollow noopener noreferrer","children":"Readable Web Stream."}]]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"const stream = await resume(reactNode, postponedState, options?)\n"}]}]]}],"\n",["$r","InlineToc",null,{}],"\n",["$r","Note",null,{"children":["$r","p",null,{"children":["This API depends on ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Streams_API","target":"_blank","rel":"nofollow noopener noreferrer","children":"Web Streams."}]," For Node.js, use ",["$r","a",null,{"href":"/reference/react-dom/server/renderToPipeableStream","children":["$r","code",null,{"children":"resumeToNodeStream"}]}]," instead."]}]}],"\n",["$r","hr",null,{}],"\n",["$r","h2",null,{"id":"reference","children":"Reference "}],"\n",["$r","h3",null,{"id":"resume","children":[["$r","code",null,{"children":"resume(node, postponedState, options?)"}]," "]}],"\n",["$r","p",null,{"children":["Call ",["$r","code",null,{"children":"resume"}]," to resume rendering a pre-rendered React tree as HTML into a ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream","target":"_blank","rel":"nofollow noopener noreferrer","children":"Readable Web Stream."}]]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"import { resume } from 'react-dom/server';\nimport {getPostponedState} from './storage';\n\nasync function handler(request, writable) {\n const postponed = await getPostponedState(request);\n const resumeStream = await resume(, postponed);\n return resumeStream.pipeTo(writable)\n}\n"}]}],"\n",["$r","p",null,{"children":["$r","a",null,{"href":"#usage","children":"See more examples below."}]}],"\n",["$r","h4",null,{"id":"parameters","children":"Parameters "}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"reactNode"}],": The React node you called ",["$r","code",null,{"children":"prerender"}]," with. For example, a JSX element like ",["$r","code",null,{"children":""}],". It is expected to represent the entire document, so the ",["$r","code",null,{"children":"App"}]," component should render the ",["$r","code",null,{"children":""}]," tag."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"postponedState"}],": The opaque ",["$r","code",null,{"children":"postpone"}]," object returned from a ",["$r","a",null,{"href":"/reference/react-dom/static/index","children":"prerender API"}],", loaded from wherever you stored it (e.g. redis, a file, or S3)."]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"optional"}]," ",["$r","code",null,{"children":"options"}],": An object with streaming options.","\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"optional"}]," ",["$r","code",null,{"children":"nonce"}],": A ",["$r","a",null,{"href":"http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce","target":"_blank","rel":"nofollow noopener noreferrer","children":["$r","code",null,{"children":"nonce"}]}]," string to allow scripts for ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src","target":"_blank","rel":"nofollow noopener noreferrer","children":[["$r","code",null,{"children":"script-src"}]," Content-Security-Policy"]}],"."]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"optional"}]," ",["$r","code",null,{"children":"signal"}],": An ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal","target":"_blank","rel":"nofollow noopener noreferrer","children":"abort signal"}]," that lets you ",["$r","a",null,{"href":"#aborting-server-rendering","children":"abort server rendering"}]," and render the rest on the client."]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"optional"}]," ",["$r","code",null,{"children":"onError"}],": A callback that fires whenever there is a server error, whether ",["$r","a",null,{"href":"/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell","children":"recoverable"}]," or ",["$r","a",null,{"href":"/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell","children":"not."}]," By default, this only calls ",["$r","code",null,{"children":"console.error"}],". If you override it to ",["$r","a",null,{"href":"/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server","children":"log crash reports,"}]," make sure that you still call ",["$r","code",null,{"children":"console.error"}],"."]}],"\n"]}],"\n"]}],"\n"]}],"\n",["$r","h4",null,{"id":"returns","children":"Returns "}],"\n",["$r","p",null,{"children":[["$r","code",null,{"children":"resume"}]," returns a Promise:"]}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":["If ",["$r","code",null,{"children":"resume"}]," successfully produced a ",["$r","a",null,{"href":"/reference/react-dom/server/renderToReadableStream#specifying-what-goes-into-the-shell","children":"shell"}],", that Promise will resolve to a ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream","target":"_blank","rel":"nofollow noopener noreferrer","children":"Readable Web Stream."}]," that can be piped to a ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/WritableStream","target":"_blank","rel":"nofollow noopener noreferrer","children":"Writable Web Stream."}],"."]}],"\n",["$r","li",null,{"children":"If an error happens in the shell, the Promise will reject with that error."}],"\n"]}],"\n",["$r","p",null,{"children":"The returned stream has an additional property:"}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"allReady"}],": A Promise that resolves when all rendering is complete. You can ",["$r","code",null,{"children":"await stream.allReady"}]," before returning a response ",["$r","a",null,{"href":"/reference/react-dom/server/renderToReadableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation","children":"for crawlers and static generation."}]," If you do that, you won’t get any progressive loading. The stream will contain the final HTML."]}],"\n"]}],"\n",["$r","h4",null,{"id":"caveats","children":"Caveats "}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","code",null,{"children":"resume"}]," does not accept options for ",["$r","code",null,{"children":"bootstrapScripts"}],", ",["$r","code",null,{"children":"bootstrapScriptContent"}],", or ",["$r","code",null,{"children":"bootstrapModules"}],". Instead, you need to pass these options to the ",["$r","code",null,{"children":"prerender"}]," call that generates the ",["$r","code",null,{"children":"postponedState"}],". You can also inject bootstrap content into the writable stream manually."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"resume"}]," does not accept ",["$r","code",null,{"children":"identifierPrefix"}]," since the prefix needs to be the same in both ",["$r","code",null,{"children":"prerender"}]," and ",["$r","code",null,{"children":"resume"}],"."]}],"\n",["$r","li",null,{"children":["Since ",["$r","code",null,{"children":"nonce"}]," cannot be provided to prerender, you should only provide ",["$r","code",null,{"children":"nonce"}]," to ",["$r","code",null,{"children":"resume"}]," if you’re not providing scripts to prerender."]}],"\n",["$r","li",null,{"children":[["$r","code",null,{"children":"resume"}]," re-renders from the root until it finds a component that was not fully pre-rendered. Only fully prerendered Components (the Component and its children finished prerendering) are skipped entirely."]}],"\n"]}],"\n",["$r","h2",null,{"id":"usage","children":"Usage "}],"\n",["$r","h3",null,{"id":"resuming-a-prerender","children":"Resuming a prerender "}],"\n"]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/App.js hidden "}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-html","meta":"public/index.html","children":"\n\n\n \n \n Document\n\n\n \n\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/index.jsx","children":"import {\n flushReadableStreamToFrame,\n getUser,\n Postponed,\n sleep,\n} from \"./demo-helpers\";\nimport { StrictMode, Suspense, use, useEffect } from \"react\";\nimport { prerender } from \"react-dom/static\";\nimport { resume } from \"react-dom/server\";\nimport { hydrateRoot } from \"react-dom/client\";\n\nfunction Header() {\n return

Me and my descendants can be prerendered

;\n}\n\nconst { promise: cookies, resolve: resolveCookies } = Promise.withResolvers();\n\nfunction Main() {\n const { sessionID } = use(cookies);\n const user = getUser(sessionID);\n\n useEffect(() => {\n console.log(\"reached interactivity!\");\n }, []);\n\n return (\n

\n Hello, {user.name}!\n \n

\n );\n}\n\nfunction Shell({ children }) {\n // In a real app, this is where you would put your html and body.\n // We're just using tags here we can include in an existing body for demonstration purposes\n return (\n \n {children}\n \n );\n}\n\nfunction App() {\n return (\n \n \n

\n \n \n

\n \n \n );\n}\n\nasync function main(frame) {\n // Layer 1\n const controller = new AbortController();\n const prerenderedApp = prerender(, {\n signal: controller.signal,\n onError(error) {\n if (error instanceof Postponed) {\n } else {\n console.error(error);\n }\n },\n });\n // We're immediately aborting in a macrotask.\n // Any data fetching that's not available synchronously, or in a microtask, will not have finished.\n setTimeout(() => {\n controller.abort(new Postponed());\n });\n\n const { prelude, postponed } = await prerenderedApp;\n await flushReadableStreamToFrame(prelude, frame);\n\n // Layer 2\n // Just waiting here for demonstration purposes.\n // In a real app, the prelude and postponed state would've been serialized in Layer 1 and Layer would deserialize them.\n // The prelude content could be flushed immediated as plain HTML while\n // React is continuing to render from where the prerender left off.\n await sleep(2000);\n\n // You would get the cookies from the incoming HTTP request\n resolveCookies({ sessionID: \"abc\" });\n\n const stream = await resume(, postponed);\n\n await flushReadableStreamToFrame(stream, frame);\n\n // Layer 3\n // Just waiting here for demonstration purposes.\n await sleep(2000);\n\n hydrateRoot(frame.contentWindow.document, );\n}\n\nmain(document.getElementById(\"container\"));\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/demo-helpers.js","children":"export async function flushReadableStreamToFrame(readable, frame) {\n const document = frame.contentWindow.document;\n const decoder = new TextDecoder();\n for await (const chunk of readable) {\n const partialHTML = decoder.decode(chunk);\n document.write(partialHTML);\n }\n}\n\n// This doesn't need to be an error.\n// You can use any other means to check if an error during prerender was\n// from an intentional abort or a real error.\nexport class Postponed extends Error {}\n\n// We're just hardcoding a session here.\nexport function getUser(sessionID) {\n return {\n name: \"Alice\",\n };\n}\n\nexport function sleep(timeoutMS) {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve();\n }, timeoutMS);\n });\n}\n"}]}]]}],["$r","MaxWidth","last",{"children":["\n",["$r","h3",null,{"id":"further-reading","children":"Further reading "}],"\n",["$r","p",null,{"children":["Resuming behaves like ",["$r","code",null,{"children":"renderToReadableStream"}],". For more examples, check out the ",["$r","a",null,{"href":"/reference/react-dom/server/renderToReadableStream#usage","children":["usage section of ",["$r","code",null,{"children":"renderToReadableStream"}]]}],".\nThe ",["$r","a",null,{"href":"/reference/react-dom/static/prerender#usage","children":["usage section of ",["$r","code",null,{"children":"prerender"}]]}]," includes examples of how to use ",["$r","code",null,{"children":"prerender"}]," specifically."]}]]}]]