知海

resumeAndPrerender()

ReactAPI 参考：React DOM

resumeAndPrerender()

resumeAndPrerender 使用 Web Stream 将预渲染的 React 树继续渲染为静态 HTML 字符串。

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

注意：

此 API 依赖 Web Streams。对于 Node.js，请改用 resumeAndPrerenderToNodeStream。

参考 {/reference/}

resumeAndPrerender(reactNode, postponedState, options?) {/resumeandprerender/}

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

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

async function handler(request, response) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerender(<App />, postponedState, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}

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

参见下方更多示例。

参数 {/parameters/}

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

返回值 {/returns/}

resumeAndPrerender 返回一个 Promise：

  • 如果渲染成功，该 Promise 将解析为一个包含以下内容的对象：
    • prelude：HTML 的 Web Stream。你可以使用该流分块发送响应，也可以将整个流读取为字符串。
    • postponed：一个可 JSON 序列化的不透明对象。如果 resumeAndPrerender 被中止，可以将其传给 resume 或 resumeAndPrerender。
  • 如果渲染失败，该 Promise 将被拒绝（reject）。据此输出一个回退壳（fallback shell）。

注意事项 {/caveats/}

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

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

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

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

用法 {/usage/}

延伸阅读 {/further-reading/}

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

帮助我们改进文档

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