resumeToPipeableStream()

ReactAPI 参考：React DOM

resumeToPipeableStream()

resumeToPipeableStream 将预渲染的 React 树以流式方式传输到可管道化的 Node.js Stream。

js 复制代码

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

注意： 此 API 是 Node.js 特有的。基于 Web Streams 的环境（如 Deno 和现代边缘运行时）应改用 resume。

参考

`resumeToPipeableStream(node, postponed, options?)`

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

js 复制代码

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);
    }
  });
}

更多示例见下文。

参数

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

返回值

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

pipe 将 HTML 输出到提供的可写 Node.js Stream。如果希望启用流式传输，请在 onShellReady 中调用 pipe；对于爬虫和静态生成，请在 onAllReady 中调用。
abort 允许你中止服务器渲染并在客户端渲染其余内容。

注意事项

resumeToPipeableStream 不接受 bootstrapScripts、bootstrapScriptContent 或 bootstrapModules 选项。你需要将这些选项传递给生成 postponedState 的 prerender 调用。你也可以手动将 bootstrap 内容注入可写流。
resumeToPipeableStream 不接受 identifierPrefix，因为前缀在 prerender 和 resumeToPipeableStream 中必须相同。
由于 nonce 不能提供给 prerender，因此只有在你不向 prerender 提供脚本时，才应向 resumeToPipeableStream 提供 nonce。
resumeToPipeableStream 会从根节点重新渲染，直到找到未完全预渲染的组件。只有完全预渲染的组件（该组件及其子组件已完成预渲染）才会被完全跳过。

用法

进一步阅读

恢复渲染的行为与 renderToReadableStream 类似。更多示例请参阅 renderToReadableStream 的用法部分。
prerender 的用法部分包含了具体如何使用 prerenderToNodeStream 的示例。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。