@@ -26,7 +26,7 @@ const {prelude} = await prerender(reactNode, options?)
2626
2727### ` prerender (reactNode, options? )` {/*prerender*/}
2828
29- 调用 ` prerender` 将您的应用程序渲染为静态 HTML。
29+ 调用 ` prerender` 将应用程序渲染为静态 HTML。
3030
3131` ` ` js
3232import { prerender } from ' react-dom/static' ;
@@ -47,23 +47,23 @@ async function handler(request) {
4747
4848#### 参数 {/*parameters*/}
4949
50- * ` reactNode` : 您希望渲染为 HTML 的 React 节点。例如,一个像 ` < App / > ` 的 JSX 节点。它应表示整个文档,因此 App 组件应渲染 ` < html> ` 标签。
50+ * ` reactNode` : 需要渲染为 HTML 的 React 节点。例如,一个像 ` < App / > ` 的 JSX 节点。它应表示整个文档,因此 App 组件应渲染 ` < html> ` 标签。
5151
5252* **可选** ` options` : 一个包含静态生成选项的对象。
5353 * **可选** ` bootstrapScriptContent` : 如果指定,此字符串将被放置在一个内联的 ` < script> ` 标签中。
54- * **可选** ` bootstrapScripts` : 一个字符串 URL 的数组,用于在页面上生成 ` < script> ` 标签。使用此选项包含调用 [` hydrateRoot` ](/reference/react-dom/client/hydrateRoot) 的 ` < script> ` 。如果您完全不希望在客户端运行 React,可以省略此选项。
54+ * **可选** ` bootstrapScripts` : 一个字符串 URL 的数组,用于在页面上生成 ` < script> ` 标签。使用此选项包含调用 [` hydrateRoot` ](/reference/react-dom/client/hydrateRoot) 的 ` < script> ` 。如果不希望在客户端运行 React,可以省略此选项。
5555 * **可选** ` bootstrapModules` : 类似于 ` bootstrapScripts` ,但会生成 [` < script type= " module" > ` ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)。
5656 * **可选** ` identifierPrefix` : React 用于 [` useId` ](/reference/react/useId) 生成的 ID 的字符串前缀。当在同一页面上使用多个根时,这对于避免冲突非常有用。必须与传递给 [` hydrateRoot` ](/reference/react-dom/client/hydrateRoot#parameters) 的前缀相同。
5757 * **可选** ` namespaceURI` : 流的根 [命名空间 URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) 的字符串。默认为常规 HTML。对于 SVG,请传递 ` ' http://www.w3.org/2000/svg' ` ;对于 MathML,请传递 ` ' http://www.w3.org/1998/Math/MathML' ` 。
58- * **可选** ` onError` : 每当发生服务器错误时触发的回调,无论是 [可恢复的](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) 还是 [不可恢复的](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)。默认情况下,它只调用 ` console .error ` 。如果您重写它以 [记录崩溃报告, ](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) 请确保仍然调用 ` console .error ` 。您还可以使用它在 shell 被生成之前 [调整状态码](/reference/react-dom/server/renderToReadableStream#setting-the-status-code)。
58+ * **可选** ` onError` : 每当发生服务器错误时触发的回调,无论是 [可恢复的](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) 还是 [不可恢复的](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)。默认情况下,它只调用 ` console .error ` 。如果你重写它用来 [记录崩溃报告](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) , 请确保仍然调用 ` console .error ` 。你还可以使用它在 shell 被生成之前 [调整状态码](/reference/react-dom/server/renderToReadableStream#setting-the-status-code)。
5959 * **可选** ` progressiveChunkSize` : 每个块的字节数。[阅读更多关于默认启发式的信息。](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
60- * **可选** ` signal` : 一个 [中止信号](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal),允许您 [中止服务器渲染](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering) 并在客户端渲染剩余内容。
60+ * **可选** ` signal` : 一个 [中止信号](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal),允许你 [中止服务器渲染](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering) 并在客户端渲染剩余内容。
6161
6262#### 返回值 {/*returns*/}
6363
6464` prerender` 返回一个 Promise 对象:
6565- 如果渲染成功,Promise 将解析为一个包含以下内容的对象:
66- - ` prelude` :一个 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 的 HTML。您可以使用此流以块的形式发送响应 ,或者将整个流读取为字符串。
66+ - ` prelude` :一个 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 的 HTML。你可以使用此流以块的形式发送响应 ,或者将整个流读取为字符串。
6767- 如果渲染失败,Promise 将被拒绝。[使用此方法输出一个回退 shell。](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)
6868
6969
@@ -72,6 +72,7 @@ async function handler(request) {
7272<Note>
7373
7474### 何时使用 ` prerender` ? {/*when-to-use-prerender*/}
75+
7576静态 ` prerender` API 用于静态服务器端生成 (SSG)。与 ` renderToString` 不同,` prerender` 会等待所有数据加载完成后再解析。这使其适合为整个页面生成静态 HTML,包括需要通过 Suspense 获取的数据。要在加载内容时进行流式传输,请使用流式服务器端渲染 (SSR) API,例如 [renderToReadableStream](/reference/react-dom/server/renderToReadableStream)。
7677
7778</Note>
@@ -82,7 +83,7 @@ async function handler(request) {
8283
8384### 将 React 树渲染为静态 HTML 流 {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
8485
85- 调用 ` prerender` 将您的 React 树渲染为静态 HTML,并生成一个 [可读的 Web 流](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream):
86+ 调用 ` prerender` 将 React 树渲染为静态 HTML,并生成一个 [可读的 Web 流](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream):
8687
8788` ` ` js [[1 , 4 , " <App />" ], [2 , 5 , " ['/main.js']" ]]
8889import { prerender } from ' react-dom/static' ;
@@ -97,7 +98,7 @@ async function handler(request) {
9798}
9899` ` `
99100
100- 与 <CodeStep step={1}>根组件</CodeStep>一起, 您需要提供一组 <CodeStep step={2}> 引导 ` < script> ` 路径 </CodeStep>. 您的根组件应返回 **包含 ` < html> ` 标签** 的整个文档。
101+ 与 <CodeStep step={1}>根组件</CodeStep>一起, 你需要提供一组 <CodeStep step={2}> 引导 ` < script> ` 路径 </CodeStep>。 根组件应返回 **包含 ` < html> ` 标签** 的整个文档。
101102
102103例如,它可能看起来像这样:
103104
@@ -129,7 +130,7 @@ React 将会把 [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doct
129130< script src= " /main.js" async = " " >< / script>
130131` ` `
131132
132- 在客户端,您的引导脚本应 [通过调用 ` hydrateRoot` 来对整个 ` 文档` 进行初始化:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
133+ 在客户端,引导脚本应 [通过调用 ` hydrateRoot` 来对整个 ` 文档` 进行初始化:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
133134
134135` ` ` js [[1 , 4 , " <App />" ]]
135136import { hydrateRoot } from ' react-dom/client' ;
@@ -144,9 +145,9 @@ hydrateRoot(document, <App />);
144145
145146#### 从构建产物中读取 CSS 和 JS 资源路径 {/*reading-css-and-js-asset-paths-from-the-build-output*/}
146147
147- 最终的资源 URL(如 JavaScript 和 CSS 文件)通常在构建后会被哈希处理。例如,` styles .css ` 可能会变成 ` styles.123456 .css ` 。对静态资源文件名进行哈希处理可以确保每次构建的相同资源都会有不同的文件名。这很有用,因为它允许您安全地为静态资源启用长期缓存 :具有特定名称的文件内容永远不会更改。
148+ 最终的资源 URL(如 JavaScript 和 CSS 文件)通常在构建后会被哈希处理。例如,` styles .css ` 可能会变成 ` styles.123456 .css ` 。对静态资源文件名进行哈希处理可以确保每次构建的相同资源都会有不同的文件名。这很有用,因为它允许你安全地为静态资源启用长期缓存 :具有特定名称的文件内容永远不会更改。
148149
149- 然而,如果在构建完成之前您无法知道资源的 URL,就无法将它们直接写入源代码。例如,像之前那样在 JSX 中硬编码 ` " /styles.css" ` 是不可行的。为了避免将它们写入源代码,您的根组件可以通过一个传递的属性读取真实的文件名映射 。
150+ 然而,如果在构建完成之前无法知道资源的 URL,就无法将它们直接写入源代码。例如,像之前那样在 JSX 中硬编码 ` " /styles.css" ` 是不可行的。为了避免将它们写入源代码,根组件可以通过一个传递的属性读取真实的文件名映射 。
150151
151152` ` ` js {1 ,6 }
152153export default function App ({ assetMap }) {
@@ -165,7 +166,7 @@ export default function App({ assetMap }) {
165166在服务器上,渲染 ` < App assetMap= {assetMap} / > ` 并传递包含资源 URL 的 ` assetMap` :
166167
167168` ` ` js {1 - 5 ,8 ,9 }
168- // 您需要从构建工具中获取此 JSON,例如从构建输出中读取。
169+ // 需要从构建工具中获取此 JSON,例如从构建输出中读取。
169170const assetMap = {
170171 ' styles.css' : ' /styles.123456.css' ,
171172 ' main.js' : ' /main.123456.js'
@@ -181,10 +182,10 @@ async function handler(request) {
181182}
182183` ` `
183184
184- 由于您的服务器现在正在渲染 ` < App assetMap= {assetMap} / > ` ,您还需要在客户端使用 ` assetMap` 进行渲染,以避免交互初始化时的错误。您可以通过序列化并将 ` assetMap` 递给客户端,如下所示:
185+ 由于服务器现在正在渲染 ` < App assetMap= {assetMap} / > ` ,你还需要在客户端使用 ` assetMap` 进行渲染,以避免交互初始化时的错误。可以通过序列化并将 ` assetMap` 递给客户端,如下所示:
185186
186187` ` ` js {9 - 10 }
187- // 您需要从构建工具中获取此 JSON。
188+ // 需要从构建工具中获取此 JSON。
188189const assetMap = {
189190 ' styles.css' : ' /styles.123456.css' ,
190191 ' main.js' : ' /main.123456.js'
@@ -219,7 +220,7 @@ hydrateRoot(document, <App assetMap={window.assetMap} />);
219220
220221### 将 React 树渲染为静态 HTML 字符串 {/*rendering-a-react-tree-to-a-string-of-static-html*/}
221222
222- 调用 ` prerender` 将您的应用程序渲染为静态 HTML 字符串:
223+ 调用 ` prerender` 将应用程序渲染为静态 HTML 字符串:
223224
224225` ` ` js
225226import { prerender } from ' react-dom/static' ;
@@ -241,7 +242,7 @@ async function renderToString() {
241242}
242243` ` `
243244
244- 这将生成您的 React 组件的初始非交互式 HTML 输出。在客户端,您需要调用 [` hydrateRoot` ](/reference/react-dom/client/hydrateRoot) 来 *初始化* 服务器生成的 HTML,并使其具有交互功能。
245+ 这将生成 React 组件的初始非交互式 HTML 输出。在客户端,你需要调用 [` hydrateRoot` ](/reference/react-dom/client/hydrateRoot) 来 *初始化* 服务器生成的 HTML,并使其具有交互功能。
245246
246247---
247248
@@ -266,7 +267,7 @@ function ProfilePage() {
266267}
267268` ` `
268269
269- 假设 ` < Posts / > ` 需要加载一些数据,这可能会花费一些时间。理想情况下,您希望等待帖子加载完成后再将其包含在 HTML 中。为此,您可以使用 Suspense 来暂停数据加载,而 ` prerender` 会等待挂起的内容加载完成后再生成静态 HTML。
270+ 假设 ` < Posts / > ` 需要加载一些数据,这可能会花费一些时间。理想情况下,你希望在帖子加载完成后再将其包含在 HTML 中。为此,可以使用 Suspense 来暂停数据加载,而 ` prerender` 会等待挂起的内容加载完成后再生成静态 HTML。
270271
271272<Note>
272273
@@ -278,7 +279,7 @@ function ProfilePage() {
278279
279280Suspense **无法** 检测在 Effect 或事件处理程序中获取的数据。
280281
281- 在上述 ` Posts` 组件中加载数据的具体方式取决于您使用的框架。如果您使用支持 Suspense 的框架,可以在其数据获取文档中找到详细信息。
282+ 在上述 ` Posts` 组件中加载数据的具体方式取决于你使用的框架。如果你使用支持 Suspense 的框架,可以在其数据获取文档中找到详细信息。
282283
283284在没有使用特定框架的情况下,支持 Suspense 的数据获取尚未得到支持。实现支持 Suspense 的数据源的要求目前不稳定且未记录。React 未来版本将发布用于集成数据源与 Suspense 的官方 API。
284285
0 commit comments