API 参考
静态 API

resumeAndPrerenderToNodeStream

resumeAndPrerenderToNodeStream 使用 Node.js 流 将预渲染的 React 树转换为静态 HTML 字符串。

const {prelude, postponed} = await resumeAndPrerenderToNodeStream(reactNode, postponedState, options?)

注意

此 API 特定于 Node.js。具有 Web Streams 的环境，如 Deno 和现代边缘运行时，应该改用 prerender。

🌐 This API is specific to Node.js. Environments with Web Streams, like Deno and modern edge runtimes, should use prerender instead.

参考

🌐 Reference

resumeAndPrerenderToNodeStream(reactNode, postponedState, options?)

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

🌐 Call resumeAndPrerenderToNodeStream to continue a prerendered React tree to a static HTML string.

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 具有交互性。

🌐 On the client, call hydrateRoot to make the server-generated HTML interactive.

查看更多示例。

参数

🌐 Parameters

  • reactNode：你调用的 React 节点 prerender（或之前的 resumeAndPrerenderToNodeStream）的。例如，一个像 <App /> 的 JSX 元素。它预计表示整个文档，因此 App 组件应该渲染 <html> 标签。
  • postponedState：从 prerender API 返回的不可见 postpone 对象，从你存储它的地方加载（例如 redis、文件或 S3）。
  • 可选 options：一个带有流选项的对象。

返回

🌐 Returns

resumeAndPrerenderToNodeStream 返回一个 Promise：

  • 如果渲染成功，则 Promise 将解析为包含以下内容的对象：
    • prelude：一个 HTML 的 Web 流。你可以使用这个流分块发送响应，或者将整个流读取到一个字符串中。
    • postponed：一个可以被 JSON 序列化的、不透明的对象，如果 resumeAndPrerenderToNodeStream 被中止，可以传递给 resumeToNodeStream 或 resumeAndPrerenderToNodeStream。
  • 如果渲染失败，Promise 将被拒绝。使用此方法输出备用 shell。

注意事项

🌐 Caveats

nonce 在预渲染时不可用。每个请求的随机数（nonce）必须是唯一的，如果你使用随机数来通过 CSP 保护你的应用，那么在预渲染中包含随机数值将是不合适且不安全的。

注意

我什么时候应该使用 resumeAndPrerenderToNodeStream？

🌐 When should I use resumeAndPrerenderToNodeStream?

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

🌐 The static resumeAndPrerenderToNodeStream API is used for static server-side generation (SSG). Unlike renderToString, resumeAndPrerenderToNodeStream waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like renderToReadableStream.

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

用法

🌐 Usage

延伸阅读

🌐 Further reading

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

上一章resumeAndPrerender