From a9c963853533840fa970ba398eddadbbeb00b2cc Mon Sep 17 00:00:00 2001 From: "translate-react-bot[bot]" <251169733+translate-react-bot[bot]@users.noreply.github.com> Date: Tue, 2 Jun 2026 14:21:50 +0000 Subject: [PATCH] =?UTF-8?q?docs:=20translate=20`renderToReadableStream.md`?= =?UTF-8?q?=20to=20=D0=A0=D1=83=D1=81=D1=81=D0=BA=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../server/renderToReadableStream.md | 590 +----------------- 1 file changed, 28 insertions(+), 562 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index f407f2245f..4f02cc0d41 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/en-US/docs/Web/API/ReadableStream) +`renderToReadableStream` рендерит React-дерево в [Readable Web Stream.](https://developer.mozilla.org/en-US/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/en-US/docs/Web/API/Streams_API) For Node.js, use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +Этот API зависит от [Web Streams.](https://developer.mozilla.org/en-US/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/en-US/docs/Web/API/ReadableStream) +Вызовите `renderToReadableStream`, чтобы отрендерить ваше React-дерево в виде HTML в [Readable Web Stream.](https://developer.mozilla.org/en-US/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`: React-узел, который вы хотите отрендерить в HTML. Например, 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) - -```js [[1, 4, ""]] -import { hydrateRoot } from 'react-dom/client'; -import App from './App.js'; - -hydrateRoot(document, ); -``` - -This will attach event listeners to the server-generated HTML and make it interactive. - - - -#### Reading CSS and JS asset paths from the build output {/*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. - -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: - -```js {1,6} -export default function App({ assetMap }) { - return ( - - - My app - - - ... - - ); -} -``` - -On the server, render `` and pass your `assetMap` with the asset URLs: - -```js {1-5,8,9} -// You'd need to get this JSON from your build tooling, e.g. read it from the build output. -const assetMap = { - 'styles.css': '/styles.123456.css', - 'main.js': '/main.123456.js' -}; - -async function handler(request) { - const stream = await renderToReadableStream(, { - bootstrapScripts: [assetMap['/main.js']] - }); - return new Response(stream, { - headers: { 'content-type': 'text/html' }, - }); -} -``` - -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: - -```js {9-10} -// You'd need to get this JSON from your build tooling. -const assetMap = { - 'styles.css': '/styles.123456.css', - 'main.js': '/main.123456.js' -}; - -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']], - }); - return new Response(stream, { - headers: { 'content-type': 'text/html' }, - }); -} -``` - -In the example above, the `bootstrapScriptContent` option adds an extra inline `