resumeToPipeableStream

resumeToPipeableStream 将一个预渲染的 React 树流式传输到可写入的 Node.js Stream.

const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, options?)

Note

此 API 仅适用于 Node.js。具有 Web Streams, 的环境,如 Deno 和现代边缘运行时,应改用 resume


Reference

resumeToPipeableStream(node, postponed, options?)

调用 resume,将一个预渲染的 React 树作为 HTML 恢复渲染到 Node.js Stream.

import { resume } from 'react-dom/server';
import {getPostponedState} from './storage';

async function handler(request, response) {
const postponed = await getPostponedState(request);
const {pipe} = resumeToPipeableStream(<App />, postponed, {
onShellReady: () => {
pipe(response);
}
});
}

查看更多示例。

Parameters

  • reactNode: 你使用 prerender 调用时传入的 React 节点。例如,像 <App /> 这样的 JSX 元素。它应表示整个文档,因此 App 组件应该渲染 <html> 标签。
  • postponedState: 从 prerender API 返回的、不透明的 postpone 对象,加载自你存储它的任意位置(例如 redis、文件或 S3)。
  • optional options: 包含流式传输选项的对象。
    • optional nonce: 一个 nonce 字符串,用于允许 script-src Content-Security-Policy 的脚本。
    • optional signal: 一个 abort signal,可让你 中止服务器渲染 并在客户端渲染其余部分。
    • optional onError: 每当发生服务器错误时都会触发的回调,无论是可恢复的还是不可恢复的。 默认情况下,它只会调用 console.error。如果你覆盖它以记录崩溃报告,请确保你仍然调用 console.error
    • optional onShellReady: 在 shell 完成后立即触发的回调。你可以在这里调用 pipe 来开始流式传输。React 会在 shell 之后流式传输额外内容,并附带内联 <script> 标签,用内容替换 HTML 加载回退内容。
    • optional onShellError: 如果渲染 shell 时发生错误就会触发的回调。它会将错误作为参数接收。此时流中还没有输出任何字节,并且 onShellReadyonAllReady 都不会被调用,因此你可以输出一个回退 HTML shell或使用 prelude。

Returns

resume 返回一个包含两个方法的对象:

  • pipe 将 HTML 输出到提供的 Writable Node.js Stream. 如果你想启用流式传输,请在 onShellReady 中调用 pipe;如果是爬虫和静态生成,则在 onAllReady 中调用。
  • abort 可让你中止服务器渲染并在客户端渲染其余部分。

Caveats

  • resumeToPipeableStream 不接受 bootstrapScriptsbootstrapScriptContentbootstrapModules 选项。相反,你需要将这些选项传递给生成 postponedStateprerender 调用。你也可以手动将 bootstrap 内容注入可写流中。
  • resumeToPipeableStream 不接受 identifierPrefix,因为该前缀需要在 prerenderresumeToPipeableStream 中保持一致。
  • 由于 nonce 不能提供给 prerender,因此只有在你没有向 prerender 提供脚本时,才应向 resumeToPipeableStream 提供 nonce
  • resumeToPipeableStream 会从根开始重新渲染,直到找到一个未完全预渲染的组件。只有完全预渲染的组件(该组件及其子组件都已完成预渲染)才会被完全跳过。

Usage

Further reading

恢复的行为类似于 renderToReadableStream。更多示例请查看 renderToReadableStream 的使用部分prerender 的使用部分包含了如何专门使用 prerenderToNodeStream 的示例。