renderToNodeStream

conststream =renderToNodeStream(reactNode,options?)

• Reference
  • renderToNodeStream(reactNode, options?)
• Usage
  • Rendering a React tree as HTML to a Node.js Readable Stream

Reference

renderToNodeStream(reactNode, options?)

On the server, callrenderToNodeStream to get aNode.js Readable Stream which you can pipe into the response.

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

conststream =renderToNodeStream(<App/>);
stream.pipe(response);

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

See more examples below.

Parameters

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

• optionaloptions: An object for server render.

  • optionalidentifierPrefix: A string prefix React uses for IDs generated byuseId. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed tohydrateRoot.

Returns

ANode.js Readable Stream that outputs an HTML string.

Caveats

• This method will wait for allSuspense 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. This is why it’s recommended that you migrate torenderToPipeableStream instead.

• 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 likeiconv-lite, which provides transform streams for transcoding text.

Usage

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

CallrenderToNodeStream to get aNode.js Readable Stream which you can pipe to your server response:

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

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

The stream will produce the initial non-interactive HTML output of your React components. On the client, you will need to callhydrateRoot tohydrate that server-generated HTML and make it interactive.