知海

resumeAndPrerenderToNodeStream()

ReactAPI 参考:React DOM

resumeAndPrerenderToNodeStream()

resumeAndPrerenderToNodeStream 使用 Node.js Stream 将预渲染的 React 树继续渲染为静态 HTML 字符串。

js 复制代码
const {prelude, postponed} = await resumeAndPrerenderToNodeStream(reactNode, postponedState, options?)

注意:

此 API 是 Node.js 特有的。使用 Web Streams 的环境(如 Deno 和现代边缘运行时)应改用 resumeAndPrerender


参考 {/reference/}

resumeAndPrerenderToNodeStream(reactNode, postponedState, options?) {/resumeandprerendertolnodestream/}

调用 resumeAndPrerenderToNodeStream 将预渲染的 React 树继续渲染为静态 HTML 字符串。

js 复制代码
import { resumeAndPrerenderToNodeStream } from 'react-dom/static';
import { getPostponedState } from 'storage';

async function handler(request, writable) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerenderToNodeStream(<App />, JSON.parse(postponedState));
  prelude.pipe(writable);
}

在客户端,调用 hydrateRoot 使服务器生成的 HTML 变为可交互。

参见下方更多示例。

参数 {/parameters/}

  • reactNode:你在调用 prerender(或上一次 resumeAndPrerenderToNodeStream)时传入的 React 节点。例如 <App /> 这样的 JSX 元素。它应当代表整个文档,因此 App 组件应渲染 <html> 标签。
  • postponedState:从 prerender API 返回的不透明 postpone 对象,从你存储它的任何地方(例如 redis、文件或 S3)加载。
  • 可选 options:包含流式选项的对象。

返回值 {/returns/}

resumeAndPrerenderToNodeStream 返回一个 Promise:

注意事项 {/caveats/}

在预渲染时,nonce 不是可用的选项。Nonce 必须针对每个请求唯一。如果你使用 nonce 配合 CSP 保护应用安全,将 nonce 值包含在预渲染本身中是不恰当且不安全的。

我什么时候应该使用 resumeAndPrerenderToNodeStream? {/when-to-use-prerender/}

静态的 resumeAndPrerenderToNodeStream API 用于静态服务器端生成(SSG)。与 renderToString 不同,resumeAndPrerenderToNodeStream 会等待所有数据加载完成后再解析。这使得它适合为完整页面生成静态 HTML,包括需要使用 Suspense 获取的数据。要在数据加载时以流式传输内容,请使用 renderToReadableStream 这类流式服务器端渲染(SSR)API。

resumeAndPrerenderToNodeStream 可以被中止,之后可以用另一个 resumeAndPrerenderToNodeStream 继续,或用 resume 恢复,以支持部分预渲染。


用法 {/usage/}

延伸阅读 {/further-reading/}

resumeAndPrerenderToNodeStream 的行为与 prerender 类似,但可用于继续之前已中止的预渲染过程。
关于恢复预渲染树的更多信息,请参阅 resume 文档

帮助我们改进文档

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