diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index aac6d96b51..ab62655792 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` рендерит дерево React в статический HTML-строку с использованием [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). ```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,51 +41,51 @@ 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`: Узел React, который вы хотите отрендерить в HTML. Например, 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) +На клиенте ваш скрипт инициализации должен [гидрировать весь `document` вызовом `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -141,15 +141,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-адреса ресурсов до завершения сборки, у вас нет возможности поместить их в исходный код. Например, жёсткое кодирование `"/styles.css"` в JSX, как ранее, не сработает. Чтобы исключить их из вашего исходного кода, ваш корневой компонент может считывать реальные имена файлов из карты, переданной в качестве пропса: ```js {1,6} export default function App({ assetMap }) { @@ -165,10 +165,10 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +На сервере отрендерите `` и передайте вашу `assetMap` с URL-адресами ресурсов: ```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' @@ -184,10 +184,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' @@ -195,7 +195,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']], }); @@ -205,7 +205,7 @@ async function handler(request) { } ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline `