diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index f1ef38b44d..abc8cb30e2 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -4,7 +4,7 @@ title: prerender -`prerender` renders a React tree to a static HTML string using a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). +`prerender` 使用 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 将 React 树渲染为静态 HTML 字符串。 ```js const {prelude} = await prerender(reactNode, options?) @@ -16,17 +16,17 @@ const {prelude} = await prerender(reactNode, options?) -This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) instead. +此 API 依赖于 [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)。对于 Node.js，请使用 [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)。 --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `prerender(reactNode, options?)` {/*prerender*/} -Call `prerender` to render your app to static HTML. +调用 `prerender` 将您的应用程序渲染为静态 HTML。 ```js import { prerender } from 'react-dom/static'; @@ -41,49 +41,48 @@ async function handler(request) { } ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +在客户端，调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 将服务器生成的 HTML 转换为可交互的内容。 -[See more examples below.](#usage) +[请参阅下面的更多示例。](#usage) -#### Parameters {/*parameters*/} +#### 参数 {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. It is expected to represent the entire document, so the App component should render the `` tag. +* `reactNode`: 您希望渲染为 HTML 的 React 节点。例如，一个像 `` 的 JSX 节点。它应表示整个文档，因此 App 组件应渲染 `` 标签。 -* **optional** `options`: An object with static generation options. - * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline ` ``` -On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) +在客户端，您的引导脚本应 [通过调用 `hydrateRoot` 来对整个 `文档` 进行初始化：](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -139,15 +138,15 @@ import App from './App.js'; hydrateRoot(document, ); ``` -This will attach event listeners to the static server-generated HTML and make it interactive. +这将为静态服务器生成的 HTML 附加事件监听器，使其具有交互性。 -#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/} +#### 从构建产物中读取 CSS 和 JS 资源路径 {/*reading-css-and-js-asset-paths-from-the-build-output*/} -The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content. +最终的资源 URL（如 JavaScript 和 CSS 文件）通常在构建后会被哈希处理。例如，`styles.css` 可能会变成 `styles.123456.css`。对静态资源文件名进行哈希处理可以确保每次构建的相同资源都会有不同的文件名。这很有用，因为它允许您安全地为静态资源启用长期缓存：具有特定名称的文件内容永远不会更改。 -However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop: +然而，如果在构建完成之前您无法知道资源的 URL，就无法将它们直接写入源代码。例如，像之前那样在 JSX 中硬编码 `"/styles.css"` 是不可行的。为了避免将它们写入源代码，您的根组件可以通过一个传递的属性读取真实的文件名映射。 ```js {1,6} export default function App({ assetMap }) { @@ -163,10 +162,10 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +在服务器上，渲染 `` 并传递包含资源 URL 的 `assetMap`： ```js {1-5,8,9} -// You'd need to get this JSON from your build tooling, e.g. read it from the build output. +// 您需要从构建工具中获取此 JSON，例如从构建输出中读取。 const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -182,10 +181,10 @@ async function handler(request) { } ``` -Since your server is now rendering ``, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this: +由于您的服务器现在正在渲染 ``，您还需要在客户端使用 `assetMap` 进行渲染，以避免交互初始化时的错误。您可以通过序列化并将 `assetMap` 递给客户端，如下所示： ```js {9-10} -// You'd need to get this JSON from your build tooling. +// 您需要从构建工具中获取此 JSON。 const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -193,7 +192,7 @@ const assetMap = { async function handler(request) { const {prelude} = await prerender(, { - // Careful: It's safe to stringify() this because this data isn't user-generated. + // 注意：将其使用 stringify() 是安全的，因为这些数据不是用户产生的。 bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`, bootstrapScripts: [assetMap['/main.js']], }); @@ -203,7 +202,7 @@ async function handler(request) { } ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline `