renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• 参考
  • renderToNodeStream(reactNode, options?)
• 用法
  • 将 React 树作为 HTML 渲染到 Node.js 可读流

参考

¥Reference

renderToNodeStream(reactNode, options?)

在服务器上，调用 renderToNodeStream 以获取 Node.js 可读流，你可以将其通过管道传输到响应中。

¥On the server, call renderToNodeStream to get a Node.js Readable Stream which you can pipe into the response.

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

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

在客户端，调用 hydrateRoot 使服务器生成的 HTML 具有交互性。

¥On the client, call hydrateRoot to make the server-generated HTML interactive.

请参阅下面的更多示例。

¥See more examples below.

参数

¥Parameters

• reactNode：要渲染为 HTML 的 React 节点。例如，像 <App /> 这样的 JSX 元素。

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

• 可选 options：用于服务器渲染的对象。

  ¥optional options: An object for server render.

  • 可选 identifierPrefix：React 用于 useId。 生成的 ID 的字符串前缀 有助于避免在同一页面上使用多个根时发生冲突。必须与传递给 hydrateRoot。 的前缀相同

    ¥optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to hydrateRoot.

返回

¥Returns

输出 HTML 字符串的 Node.js 可读流。

¥A Node.js Readable Stream that outputs an HTML string.

注意事项

¥Caveats

• 在返回任何输出之前，此方法将等待所有 Suspense 边界 完成。

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

• 从 React 18 开始，这个方法缓冲了它的所有输出，所以它实际上并没有提供任何流式传输的好处。这就是为什么建议你迁移到 renderToPipeableStream 的原因。

  ¥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 to renderToPipeableStream instead.

• 返回的流是以 utf-8 编码的字节流。如果你需要其他编码的流，请查看像 iconv-lite 这样的项目，它提供用于转码文本的转换流。

  ¥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.

用法

¥Usage

将 React 树作为 HTML 渲染到 Node.js 可读流

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

调用 renderToNodeStream 以获取 Node.js 可读流，你可以将其通过管道传输到服务器响应：

¥Call renderToNodeStream to get a Node.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) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

该流将生成 React 组件的初始非交互式 HTML 输出。在客户端，你将需要调用 hydrateRoot 来混合服务器生成的 HTML 并使其具有交互性。

¥The stream 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.