resumeToPipeableStream 将一个预渲染的 React 树流式传输到可写入的 Node.js Stream.
const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, options?)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-srcContent-Security-Policy 的脚本。 - optional
signal: 一个 abort signal,可让你 中止服务器渲染 并在客户端渲染其余部分。 - optional
onError: 每当发生服务器错误时都会触发的回调,无论是可恢复的还是不可恢复的。 默认情况下,它只会调用console.error。如果你覆盖它以记录崩溃报告,请确保你仍然调用console.error。 - optional
onShellReady: 在 shell 完成后立即触发的回调。你可以在这里调用pipe来开始流式传输。React 会在 shell 之后流式传输额外内容,并附带内联<script>标签,用内容替换 HTML 加载回退内容。 - optional
onShellError: 如果渲染 shell 时发生错误就会触发的回调。它会将错误作为参数接收。此时流中还没有输出任何字节,并且onShellReady和onAllReady都不会被调用,因此你可以输出一个回退 HTML shell或使用 prelude。
- optional
Returns
resume 返回一个包含两个方法的对象:
pipe将 HTML 输出到提供的 Writable Node.js Stream. 如果你想启用流式传输,请在onShellReady中调用pipe;如果是爬虫和静态生成,则在onAllReady中调用。abort可让你中止服务器渲染并在客户端渲染其余部分。
Caveats
resumeToPipeableStream不接受bootstrapScripts、bootstrapScriptContent或bootstrapModules选项。相反,你需要将这些选项传递给生成postponedState的prerender调用。你也可以手动将 bootstrap 内容注入可写流中。resumeToPipeableStream不接受identifierPrefix,因为该前缀需要在prerender和resumeToPipeableStream中保持一致。- 由于
nonce不能提供给 prerender,因此只有在你没有向 prerender 提供脚本时,才应向resumeToPipeableStream提供nonce。 resumeToPipeableStream会从根开始重新渲染,直到找到一个未完全预渲染的组件。只有完全预渲染的组件(该组件及其子组件都已完成预渲染)才会被完全跳过。
Usage
Further reading
恢复的行为类似于 renderToReadableStream。更多示例请查看 renderToReadableStream 的使用部分。
prerender 的使用部分包含了如何专门使用 prerenderToNodeStream 的示例。