renderToNodeStream
renderToNodeStream
可以为 Node.js 只读流 渲染 React 树。
const stream = renderToNodeStream(reactNode, options?)
参考
renderToNodeStream(reactNode, options?)
在服务端调用 renderToNodeStream
获取 Node.js 只读流,你也可以将其管道(pipe)传输到响应中。
import { renderToNodeStream } from 'react-dom/server';
const stream = renderToNodeStream(<App />);
stream.pipe(response);
在客户端调用 hydrateRoot
使由服务器生成的 HTML 具有交互功能。
参数
-
reactNode
:想要渲染为 HTML 的 React 节点。比如像<App />
一样的 JSX 元素。 -
optional
options
: An object for server render.- optional
identifierPrefix
: A string prefix React uses for IDs generated byuseId
. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed tohydrateRoot
.
- optional
返回值
输出 HTML 字符串的 Node.js 只读流。
注意
-
此方法会等待所有 Suspense 边界 完成后才返回输出。
-
从 React 18 开始,此方法会缓冲所有输出,因此实际上它并没有提供任何流式传输的好处。这就是为什么建议改用
renderToPipeableStream
。 -
返回的是一个 utf-8 编码的字节流。如果你需要其他编码格式的流,请参考 iconv-lite 这样的项目,它提供了用于转码文本的转换流。
用法
为 Node.js 只读流将 React 树渲染为 HTML
调用 renderToNodeStream
获取 Node.js 只读流,你也可以将其管道(pipe)传输到服务器响应中。
import { renderToNodeStream } from 'react-dom/server';
// 路由处理程序的语法取决于使用的后端框架。
app.use('/', (request, response) => {
const stream = renderToNodeStream(<App />);
stream.pipe(response);
});
这里的流会将 React 组件初始输出为非交互式 HTML。在客户端上,你需要调用 hydrateRoot
方法来激活服务器生成的 HTML 并使其具有交互功能。