renderToStaticNodeStream

renderToStaticNodeStream 将非交互式 React 树渲染到 Node.js 可读流。

¥renderToStaticNodeStream renders a non-interactive React tree to a Node.js Readable Stream.

const stream = renderToStaticNodeStream(reactNode, options?)

参考

¥Reference

renderToStaticNodeStream(reactNode, options?)

在服务器上,调用 renderToStaticNodeStream 获取 Node.js 可读流

¥On the server, call renderToStaticNodeStream to get a Node.js Readable Stream.

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

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

请参阅下面的更多示例。

¥See more examples below.

该流将生成 React 组件的非交互式 HTML 输出。

¥The stream will produce non-interactive HTML output of your React components.

参数

¥Parameters

  • reactNode:要渲染为 HTML 的 React 节点。例如,像 <Page /> 这样的 JSX 元素。

    ¥reactNode: A React node you want to render to HTML. For example, a JSX element like <Page />.

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

    ¥optional options: An object for server render.

    • 可选 identifierPrefix:React 用于 useId 生成的 ID 的字符串前缀 有助于避免在同一页面上使用多个根时发生冲突。

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

返回

¥Returns

输出 HTML 字符串的 Node.js 可读流。生成的 HTML 无法在客户端上混合。

¥A Node.js Readable Stream that outputs an HTML string. The resulting HTML can’t be hydrated on the client.

注意事项

¥Caveats

  • renderToStaticNodeStream 输出不能水合。

    ¥renderToStaticNodeStream output cannot be hydrated.

  • 在返回任何输出之前,此方法将等待所有 Suspense 边界 完成。

    ¥This method will wait for all Suspense boundaries to complete before returning any output.

  • 从 React 18 开始,这个方法缓冲了它的所有输出,所以它实际上并没有提供任何流式传输的好处。

    ¥As of React 18, this method buffers all of its output, so it doesn’t actually provide any streaming benefits.

  • 返回的流是以 utf-8 编码的字节流。如果你需要其他编码的流,请查看像 iconv-lite 这样的项目,它提供用于转码文本的转换流。

    ¥The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like iconv-lite, which provides transform streams for transcoding text.


用法

¥Usage

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

¥Rendering a React tree as static HTML to a Node.js Readable Stream

调用 renderToStaticNodeStream 以获取 Node.js 可读流,你可以将其通过管道传输到服务器响应:

¥Call renderToStaticNodeStream to get a Node.js Readable Stream which you can pipe to your server response:

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

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);
});

该流将生成 React 组件的初始非交互式 HTML 输出。

¥The stream will produce the initial non-interactive HTML output of your React components.

易犯错误

此方法渲染无法水合的非交互式 HTML。如果你想使用 React 作为简单的静态页面生成器,或者你要渲染完全静态的内容(例如电子邮件),这非常有用。

¥This method renders non-interactive HTML that cannot be hydrated. This is useful if you want to use React as a simple static page generator, or if you’re rendering completely static content like emails.

交互式应用应在服务器上使用 renderToPipeableStream,在客户端上使用 hydrateRoot

¥Interactive apps should use renderToPipeableStream on the server and hydrateRoot on the client.


React 中文网 - 粤ICP备13048890号