renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode, options?)

• 参考
  • renderToStaticNodeStream(reactNode, options?)
• 用法
  • 为 Node.js 只读流将 React 树渲染为静态 HTML

参考

renderToStaticNodeStream(reactNode, options?)

在服务端调用 renderToStaticNodeStream 获取 Node.js 只读流。

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

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

参见下面更多示例。

调用此方法为 React 组件输出非交互式 HTML。

参数

• reactNode：想要渲染为 HTML 的 React 节点。比如像 <Page /> 一样的 JSX 元素。

• optional options: An object for server render.

  • optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page.

返回值

输出 HTML 字符串的 Node.js 只读流，以此法输出的 HTML 不能被客户端 hydrate。

注意

• renderToStaticNodeStream 的输出不能被 hydrate。

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

• 从 React 18 开始，此方法会缓冲所有输出，因此实际上它并没有提供任何流式传输的好处。

• 返回的是一个 utf-8 编码的字节流。如果你需要其他编码格式的流，请参考 iconv-lite 这样的项目，它提供了用于转码文本的转换流。

用法

为 Node.js 只读流将 React 树渲染为静态 HTML

调用 renderToStaticNodeStream 获取 Node.js 只读流，你也可以将其管道（pipe）传输到服务器响应中。

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

// 路由处理程序的语法取决于使用的后端框架。
app.use('/', (request, response) => {
  const stream = renderToStaticNodeStream(<Page />);
  stream.pipe(response);
});

此方法将会将 React 组件初始输出为非交互式 HTML。