renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

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

参考

renderToNodeStream(reactNode, options?)

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

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

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

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

请在下方查看更多示例。

参数

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

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

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

返回值

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

注意事项

• 此方法将等待所有 Suspense 边界 完成，然后才会返回任何输出。

• 从 React 18 开始，此方法会缓冲所有输出，因此它实际上不提供任何流式传输优势。这就是建议您迁移到

  返回的流是采用 utf-8 编码的字节流。如果您需要其他编码的流，请查看 iconv-lite 之类的项目，该项目提供了用于文本转码的转换流。

用法

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

调用 renderToNodeStream 获取一个 Node.js 可读取流，您可以将其传递到服务器响应

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 并使其具有交互性。