diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index 841f964629..02b8eb1bf1 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -4,7 +4,7 @@ title: renderToReadableStream -`renderToReadableStream` renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream) +`renderToReadableStream` 将 React 树渲染后发送至 [Web 可读流](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream)。 ```js const stream = await renderToReadableStream(reactNode, options?) @@ -16,17 +16,17 @@ const stream = await renderToReadableStream(reactNode, options?) -This API depends on [Web Streams.](https://developer.mozilla.org/zh-CN/docs/Web/API/Streams_API) For Node.js, use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +这个 API 依赖 [Web 流](https://developer.mozilla.org/zh-CN/docs/Web/API/Streams_API)，因此在 Node.js 中使用 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) 代替。 --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `renderToReadableStream(reactNode, options?)` {/*rendertoreadablestream*/} -Call `renderToReadableStream` to render your React tree as HTML into a [Readable Web Stream.](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream) +调用 `renderToReadableStream`，将 React 树渲染为 HTML 后，发送至 [Web 可读流](https://developer.mozilla.org/zh-CN/docs/Web/API/ReadableStream) 中。 ```js import { renderToReadableStream } from 'react-dom/server'; @@ -41,44 +41,44 @@ 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 element 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 streaming 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` 混合整个 `document` ](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)： ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -134,15 +134,15 @@ import App from './App.js'; hydrateRoot(document, ); ``` -This will attach event listeners to the 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，那就无法将它们放到源代码中。例如，像前面那样将 `"/styles.css"` 硬编码到 JSX 中是行不通的。为了将它们保持在源代码之外，根组件可以从 prop 传递的映射中读取真实文件名： ```js {1,6} export default function App({ assetMap }) { @@ -158,10 +158,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' @@ -177,10 +177,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' @@ -188,7 +188,7 @@ const assetMap = { async function handler(request) { const stream = await renderToReadableStream(, { - // Careful: It's safe to stringify() this because this data isn't user-generated. + // 注意：序列化是安全的，因为这个数据不是用户生成的。 bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`, bootstrapScripts: [assetMap['/main.js']], }); @@ -198,7 +198,7 @@ async function handler(request) { } ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline `