renderToStaticNodeStream
可以为 Node.js 只读流 渲染非交互式 React 树。
const stream = renderToStaticNodeStream(reactNode)
参考
renderToStaticNodeStream(reactNode)
在服务端调用 renderToStaticNodeStream
获取 Node.js 只读流。
import { renderToStaticNodeStream } from 'react-dom/server';
const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);
调用此方法为 React 组件输出非交互式 HTML。
参数
reactNode
:想要渲染为 HTML 的 React 节点。比如像<Page />
一样的 JSX 元素。
返回值
输出 HTML 字符串的 Node.js 只读流,以此法输出的 HTML 不能被客户端水合(hydrate)。
注意
-
renderToStaticNodeStream
的输出不能被水合(hydrated)。 -
此方法会等待所有 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。