renderToStaticNodeStream

renderToStaticNodeStream renders a non-interactive React tree to a Node.js Readable Stream.

const stream = renderToStaticNodeStream(reactNode)

Usage

Rendering a React tree as static HTML to a Node.js Readable Stream

Call renderToStaticNodeStream to get a Node.js Readable Stream which you can pipe to your server response:

import { renderToStaticNodeStream } from 'react-dom/server';

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);
});

The stream will produce the initial non-interactive HTML output of your React components.

Pitfall

This method renders non-interactive HTML that cannot be hydrated. This is useful if you want to use React as a simple static page generator, or if you’re rendering completely static content like emails.

Interactive apps should use renderToPipeableStream on the server and hydrateRoot on the client.


Reference

renderToStaticNodeStream(reactNode)

On the server, call renderToStaticNodeStream to get a Node.js Readable Stream.

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

The stream will produce non-interactive HTML output of your React components.

Parameters

  • reactNode: A React node you want to render to HTML. For example, a JSX element like <Page />.

Returns

A Node.js Readable Stream that outputs an HTML string. The resulting HTML can’t be hydrated on the client.

Caveats

  • renderToStaticNodeStream output cannot be hydrated.

  • This method will wait for all Suspense boundaries to complete before returning any output.

  • As of React 18, this method buffers all of its output, so it doesn’t actually provide any streaming benefits.

  • The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like iconv-lite, which provides transform streams for transcoding text.