renderToStaticNodeStream

renderToStaticNodeStream 可以为 Node.js 只读流 渲染非交互式 React 树。

const stream = renderToStaticNodeStream(reactNode, options?)

参考

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。

陷阱

此方法将会渲染 无法被 hydrate 的非交互式 HTML。如果你想将 React 用作简单的静态页面生成器,或者渲染完全静态的内容(如电子邮件),那么这将会很有用。

交互式应用程序应该在服务端使用 renderToPipeableStream 并在客户端结合使用 hydrateRoot