prerenderToNodeStream – React
prerenderToNodeStream – React
v19
prerenderToNodeStream
prerenderToNodeStream renders a React tree to a static HTML
string using a Node.js Stream..
Reference
prerenderToNodeStream(reactNode, options?)
Usage
Troubleshooting
Note
Reference
https://react.dev/reference/react-dom/static/prerenderToNodeStream 1/9
20/02/2025, 19:18 prerenderToNodeStream – React
prerenderToNodeStream(reactNode, options?)
response.setHeader('Content-Type', 'text/plain');
prelude.pipe(response);
});
Parameters
https://react.dev/reference/react-dom/static/prerenderToNodeStream 2/9
20/02/2025, 19:18 prerenderToNodeStream – React
optional namespaceURI : A string with the root namespace URI for the
stream. Defaults to regular HTML. Pass
'http://www.w3.org/2000/svg' for SVG or
'http://www.w3.org/1998/Math/MathML' for MathML.
Returns
prelude : a Node.js Stream. of HTML. You can use this stream to send
a response in chunks, or you can read the entire stream into a string.
If rendering fails, the Promise will be rejected. Use this to output a fallback
shell.
Note
https://react.dev/reference/react-dom/static/prerenderToNodeStream 3/9
20/02/2025, 19:18 prerenderToNodeStream – React
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.
Usage
response.setHeader('Content-Type', 'text/plain');
prelude.pipe(response);
});
Along with the root component , you need to provide a list of bootstrap
<script> paths . Your root component should return the entire document
https://react.dev/reference/react-dom/static/prerenderToNodeStream 4/9
20/02/2025, 19:18 prerenderToNodeStream – React
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale
<link rel="stylesheet" href="/styles.css"></link>
<title>My app</title>
</head>
<body>
<Router />
</body>
</html>
);
}
React will inject the doctype and your bootstrap <script> tags into the
resulting HTML stream:
<!DOCTYPE html>
<html>
<!-- ... HTML from your components ... -->
</html>
<script src=" /main.js " async=""></script>
On the client, your bootstrap script should hydrate the entire document with
a call to hydrateRoot :
This will attach event listeners to the static server-generated HTML and
make it interactive.
DEEP DIVE
https://react.dev/reference/react-dom/static/prerenderToNodeStream 5/9
20/02/2025, 19:18 prerenderToNodeStream – React
Show Details
This will produce the initial non-interactive HTML output of your React
components. On the client, you will need to call hydrateRoot to hydrate that
server-generated HTML and make it interactive.
prerenderToNodeStream waits for all data to load before finishing the static
HTML generation and resolving. For example, consider a profile page that
https://react.dev/reference/react-dom/static/prerenderToNodeStream 6/9
20/02/2025, 19:18 prerenderToNodeStream – React
shows a cover, a sidebar with friends and photos, and a list of posts:
function ProfilePage() {
return (
<ProfileLayout>
<ProfileCover />
<Sidebar>
<Friends />
<Photos />
</Sidebar>
<Suspense fallback={<PostsGlimmer />}>
<Posts />
</Suspense>
</ProfileLayout>
);
}
Imagine that <Posts /> needs to load some data, which takes some time.
Ideally, you’d want wait for the posts to finish so it’s included in the HTML. To
do this, you can use Suspense to suspend on the data, and
prerenderToNodeStream will wait for the suspended content to finish before
Note
https://react.dev/reference/react-dom/static/prerenderToNodeStream 7/9
20/02/2025, 19:18 prerenderToNodeStream – React
The exact way you would load data in the Posts component above
depends on your framework. If you use a Suspense-enabled
framework, you’ll find the details in its data fetching documentation.
Troubleshooting
PREVIOUS
prerender
https://react.dev/reference/react-dom/static/prerenderToNodeStream 8/9
20/02/2025, 19:18 prerenderToNodeStream – React
uwu?
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
Community More
Acknowledgements Terms
https://react.dev/reference/react-dom/static/prerenderToNodeStream 9/9