@@ -4,7 +4,7 @@ title: prerender
44
55<Intro >
66
7- ` prerender ` 使用 [ Web Stream ] ( https://developer.mozilla.org/en-US /docs/Web/API/Streams_API ) 将 React 树渲染为静态 HTML 字符串。
7+ ` prerender ` 使用 [ Web 流 ] ( https://developer.mozilla.org/zh-CN /docs/Web/API/Streams_API ) 将 React 树渲染为静态 HTML 字符串。
88
99``` js
1010const {prelude } = await prerender (reactNode, options? )
@@ -16,7 +16,7 @@ const {prelude} = await prerender(reactNode, options?)
1616
1717<Note>
1818
19- 此 API 依赖于 [Web Streams ](https://developer.mozilla.org/en-US /docs/Web/API/Streams_API)。对于 Node.js,请使用 [` prerenderToNodeStream` ](/reference/react-dom/static/prerenderToNodeStream)。
19+ 此 API 依赖于 [Web 流 ](https://developer.mozilla.org/zh-CN /docs/Web/API/Streams_API)。对于 Node.js,请使用 [` prerenderToNodeStream` ](/reference/react-dom/static/prerenderToNodeStream)。
2020
2121</Note>
2222
@@ -52,23 +52,23 @@ async function handler(request) {
5252* **可选** ` options` :一个包含静态生成选项的对象。
5353 * **可选** ` bootstrapScriptContent` :如果指定,此字符串将被放置在一个内联的 ` < script> ` 标签中。
5454 * **可选** ` bootstrapScripts` :一个字符串 URL 的数组,用于在页面上生成 ` < script> ` 标签。使用此选项包含调用 [` hydrateRoot` ](/reference/react-dom/client/hydrateRoot) 的 ` < script> ` 。如果不希望在客户端运行 React,可以省略此选项。
55- * **可选** ` bootstrapModules` :类似于 ` bootstrapScripts` ,但会生成 [` < script type= " module" > ` ](https://developer.mozilla.org/en-US /docs/Web/JavaScript/Guide/Modules)。
55+ * **可选** ` bootstrapModules` :类似于 ` bootstrapScripts` ,但会生成 [` < script type= " module" > ` ](https://developer.mozilla.org/zh-CN /docs/Web/JavaScript/Guide/Modules)。
5656 * **可选** ` identifierPrefix` :React 用于 [` useId` ](/reference/react/useId) 生成的 ID 的字符串前缀。当在同一页面上使用多个根时,这对于避免冲突非常有用。必须与传递给 [` hydrateRoot` ](/reference/react-dom/client/hydrateRoot#parameters) 的前缀相同。
57- * **可选** ` 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' ` 。
57+ * **可选** ` namespaceURI` :流的根 [命名空间 URI](https://developer.mozilla.org/zh-CN /docs/Web/API/Document/createElementNS#important_namespace_uris) 的字符串。默认为常规 HTML。对于 SVG,请传递 ` ' http://www.w3.org/2000/svg' ` ;对于 MathML,请传递 ` ' http://www.w3.org/1998/Math/MathML' ` 。
5858 * **可选** ` 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),允许你 [中止预渲染](#aborting-prerendering) 并在客户端渲染剩余内容。
60+ * **可选** ` signal` :一个 [中止信号](https://developer.mozilla.org/zh-CN /docs/Web/API/AbortSignal),允许你 [中止预渲染](#aborting-prerendering) 并在客户端渲染剩余内容。
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/zh-CN /docs/Web/API/Streams_API) 的 HTML。你可以使用此流以块的形式发送响应,或者将整个流读取为字符串。
6767- 如果渲染失败,Promise 将被拒绝。[使用此方法输出一个回退 shell。](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)
6868
69- #### Caveats {/*caveats*/}
69+ #### 注意事项 {/*caveats*/}
7070
71- ` nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US /docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself.
71+ 在预渲染时, ` nonce` 不是一个可用的选项。Nonce 必须在每个请求中都是唯一的,如果你使用 nonce 和 [CSP](https://developer.mozilla.org/zh-CN /docs/Web/HTTP/Guides/CSP) 来保护你的应用,那么将 nonce 值包含在预渲染产物中本身是不恰当且不安全的。
7272
7373
7474<Note>
@@ -85,7 +85,7 @@ async function handler(request) {
8585
8686### 将 React 树渲染为静态 HTML 流 {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
8787
88- 调用 ` prerender` 将 React 树渲染为静态 HTML,并生成一个 [可读的 Web 流](https://developer.mozilla.org/en-US /docs/Web/API/ReadableStream):
88+ 调用 ` prerender` 将 React 树渲染为静态 HTML,并生成一个 [可读的 Web 流](https://developer.mozilla.org/zh-CN /docs/Web/API/ReadableStream):
8989
9090` ` ` js [[1 , 4 , " <App />" ], [2 , 5 , " ['/main.js']" ]]
9191import { prerender } from ' react-dom/static' ;
@@ -122,7 +122,7 @@ export default function App() {
122122}
123123` ` `
124124
125- React 将会把 [doctype](https://developer.mozilla.org/en-US /docs/Glossary/Doctype) 和 <CodeStep step={2}>引导 ` < script> ` 标签</CodeStep> 注入到生成的 HTML 流中:
125+ React 将会把 [doctype](https://developer.mozilla.org/zh-CN /docs/Glossary/Doctype) 和 <CodeStep step={2}>引导 ` < script> ` 标签</CodeStep> 注入到生成的 HTML 流中:
126126
127127` ` ` html [[2 , 5 , " /main.js" ]]
128128< ! DOCTYPE html>
@@ -302,8 +302,8 @@ async function renderToString() {
302302 }, 10000 );
303303
304304 try {
305- // the prelude will contain all the HTML that was prerendered
306- // before the controller aborted.
305+ // prelude 将包含在控制器中止前
306+ // 已被预渲染的所有 HTML。
307307 const {prelude } = await prerender (< App / > , {
308308 signal: controller .signal ,
309309 });
0 commit comments