API 参考
静态 API

resumeAndPrerender

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

const { prelude,postpone } = await resumeAndPrerender(reactNode, postponedState, options?)

注意

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

🌐 This API depends on Web Streams. For Node.js, use resumeAndPrerenderToNodeStream instead.

参考

🌐 Reference

resumeAndPrerender(reactNode, postponedState, options?)

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

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

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

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

查看更多示例。

参数

🌐 Parameters

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

返回

🌐 Returns

prerender 返回一个 Promise：

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

注意事项

🌐 Caveats

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

注意

我什么时候应该使用 resumeAndPrerender？

🌐 When should I use resumeAndPrerender?

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

🌐 The static resumeAndPrerender API is used for static server-side generation (SSG). Unlike renderToString, resumeAndPrerender 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.

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

用法

🌐 Usage

延伸阅读

🌐 Further reading

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

上一章prerenderToNodeStream
下一章resumeAndPrerenderToNodeStream