From e7f71ffbf51a7b5d23f310356b5ccf1486e167b8 Mon Sep 17 00:00:00 2001 From: TibidoX <79273248+TibidoX@users.noreply.github.com> Date: Mon, 15 May 2023 15:07:38 +0300 Subject: [PATCH 1/6] Translation renderToString.md --- .../react-dom/server/renderToString.md | 74 +++++++++---------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 41bc6a9828..d3cc51b92b 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -1,16 +1,16 @@ --- -title: renderToString +Заголовок: renderToString --- -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` не поддерживает потоковую передачу или ожидание данных. [Смотрите альтернативные варианты.](#alternatives) -`renderToString` renders a React tree to an HTML string. +`renderToString` рендерит дерево React в HTML-строку. ```js const html = renderToString(reactNode) @@ -22,11 +22,11 @@ const html = renderToString(reactNode) --- -## Reference {/*reference*/} +## Справка {/*reference*/} ### `renderToString(reactNode)` {/*rendertostring*/} -On the server, call `renderToString` to render your app to HTML. +На сервере вызовите `renderToString`, чтобы отрендерить ваше приложение в HTML. ```js import { renderToString } from 'react-dom/server'; @@ -34,81 +34,81 @@ import { renderToString } from 'react-dom/server'; const html = renderToString(); ``` -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 ``. +* `reactNode`: Узел React, который вы хотите отрендерить в HTML. Например, JSX узел типа ``. -#### Returns {/*returns*/} +#### Возвращаемые значения {/*returns*/} -An HTML string. +Строка HTML. -#### Caveats {/*caveats*/} +#### Предостережения {/*caveats*/} -* `renderToString` has limited Suspense support. If a component suspends, `renderToString` immediately sends its fallback as HTML. +* `renderToString` имеет ограниченную поддержку задержки. Если компонент приостановлен, `renderToString` немедленно отправляет его резервный вариант в виде HTML. -* `renderToString` works in the browser, but using it in the client code is [not recommended.](#removing-rendertostring-from-the-client-code) +* `renderToString` работает в браузере, но использовать его в клиентском коде [не рекомендуется.](#removing-rendertostring-from-the-client-code) --- -## Usage {/*usage*/} +## Применение {/*usage*/} -### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/} +### Рендеринг дерева React как строки HTML {/*rendering-a-react-tree-as-html-to-a-string*/} -Call `renderToString` to render your app to an HTML string which you can send with your server response: +Вызовите `renderToString`, чтобы отрендерить ваше приложение в строку HTML, которую вы можете отправить вместе с ответом вашего сервера: ```js {5-6} import { renderToString } from 'react-dom/server'; -// The route handler syntax depends on your backend framework +// Синтаксис обработчика маршрута зависит от вашего бэкенд-фреймворка app.use('/', (request, response) => { const html = renderToString(); response.send(html); }); ``` -This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive. +Этот код создает исходный неинтерактивный HTML-вывод ваших компонентов React. На клиенте вам нужно будет вызвать [`hydrateRoot`](/reference/react-dom/client/hydrateRoot), чтобы сделать HTML, который сгенерировал сервер, интерактивным. -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` не поддерживает потоковую передачу или ожидание данных. [Смотрите альтернативные варианты.](#alternatives) --- -## Alternatives {/*alternatives*/} +## Альтернативные варианты {/*alternatives*/} -### Migrating from `renderToString` to a streaming method on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} +### Переход от `renderToString` к потоковому методу на сервере {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} -`renderToString` returns a string immediately, so it does not support streaming or waiting for data. +`renderToString` немедленно возвращает строку, поэтому он не поддерживает потоковую передачу или ожидание данных. -When possible, we recommend using these fully-featured alternatives: +Мы рекомендуем использовать эти полнофункциональные альтернативы, когда это возможно: -* If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) -* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream) +* Если вы используете Node.js, используйте [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) +* Если вы используете Deno или современную пограничную среду выполнения с [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), используйте [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream) -You can continue using `renderToString` if your server environment does not support streams. +Вы можете продолжать использовать`renderToString`, если среда вашего сервера не поддерживает потоки. --- -### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/} +### Удаление `renderToString` из клиентского кода {/*removing-rendertostring-from-the-client-code*/} -Sometimes, `renderToString` is used on the client to convert some component to HTML. +Иногда `renderToString` используют на клиенте для преобразования какого-либо компонента в HTML. ```js {1-2} -// 🚩 Unnecessary: using renderToString on the client +// 🚩 Лишнее: использование renderToString на клиенте import { renderToString } from 'react-dom/server'; const html = renderToString(); console.log(html); // For example, "..." ``` -Importing `react-dom/server` **on the client** unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use [`createRoot`](/reference/react-dom/client/createRoot) and read HTML from the DOM: +Импорт `react-dom/server` **на клиенте** излишне увеличивает размер пакета, и этого следует избегать. Если вам в браузере нужно преобразовать какой-либо компонент в HTML, используйте [`createRoot`](/reference/react-dom/client/createRoot) и читайте HTML из DOM: ```js import { createRoot } from 'react-dom/client'; @@ -122,17 +122,17 @@ flushSync(() => { console.log(div.innerHTML); // For example, "..." ``` -The [`flushSync`](/reference/react-dom/flushSync) call is necessary so that the DOM is updated before reading its [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property. +Вызов [`flushSync`](/reference/react-dom/flushSync) необходим, чтобы DOM обновлялся перед чтением его свойства [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). --- -## Troubleshooting {/*troubleshooting*/} +## Поиск неисправностей {/*troubleshooting*/} -### When a component suspends, the HTML always contains a fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} +### Когда компонент приостанавливается, HTML всегда содержит запасной вариант {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} -`renderToString` does not fully support Suspense. +`renderToString` не полностью поддерживает задержку. -If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [``](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads. +Если какой-либо компонент приостанавливается (например, потому что он определен с [`lazy`](/reference/react/lazy) или извлекает данные), `renderToString` не будет ждать разрешения своего содержимого. Вместо этого `renderToString` найдет ближайшую [``](/reference/react/Suspense) границу над ней и отрендерит её `резервный вариант` в HTML. Содержимое не появится, пока не загрузится клиентский код. -To solve this, use one of the [recommended streaming solutions.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) They can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. +Чтобы решить эту проблему, используйте одно из [рекомендуемых решений для потоковой передачи.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) Они могут передавать контент фрагментами по мере его разрешения на сервере, чтобы пользователь видел, что страница постепенно заполняется до загрузки клиентского кода. From 73a68e2ec8eb487a53eeb0660f457d4ebcbe06b2 Mon Sep 17 00:00:00 2001 From: TibidoX <79273248+TibidoX@users.noreply.github.com> Date: Mon, 15 May 2023 15:11:52 +0300 Subject: [PATCH 2/6] Translate renderToString.md --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index d3cc51b92b..9d96d5517a 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -105,7 +105,7 @@ app.use('/', (request, response) => { import { renderToString } from 'react-dom/server'; const html = renderToString(); -console.log(html); // For example, "..." +console.log(html); // Например, "..." ``` Импорт `react-dom/server` **на клиенте** излишне увеличивает размер пакета, и этого следует избегать. Если вам в браузере нужно преобразовать какой-либо компонент в HTML, используйте [`createRoot`](/reference/react-dom/client/createRoot) и читайте HTML из DOM: From 24ecaf30d162dc02efcf08b4d27d8ad5279c8e30 Mon Sep 17 00:00:00 2001 From: TibidoX <79273248+TibidoX@users.noreply.github.com> Date: Mon, 15 May 2023 15:15:16 +0300 Subject: [PATCH 3/6] Translate renderToString.md --- src/content/reference/react-dom/server/renderToString.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 9d96d5517a..c332a03c31 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -48,7 +48,7 @@ const html = renderToString(); #### Предостережения {/*caveats*/} -* `renderToString` имеет ограниченную поддержку задержки. Если компонент приостановлен, `renderToString` немедленно отправляет его резервный вариант в виде HTML. +* `renderToString` имеет ограниченную поддержку задержки. Если компонент приостановлен, `renderToString` немедленно отправляет fallback в виде HTML. * `renderToString` работает в браузере, но использовать его в клиентском коде [не рекомендуется.](#removing-rendertostring-from-the-client-code) @@ -128,11 +128,11 @@ console.log(div.innerHTML); // For example, "..." ## Поиск неисправностей {/*troubleshooting*/} -### Когда компонент приостанавливается, HTML всегда содержит запасной вариант {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} +### Когда компонент приостанавливается, HTML всегда содержит fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} `renderToString` не полностью поддерживает задержку. -Если какой-либо компонент приостанавливается (например, потому что он определен с [`lazy`](/reference/react/lazy) или извлекает данные), `renderToString` не будет ждать разрешения своего содержимого. Вместо этого `renderToString` найдет ближайшую [``](/reference/react/Suspense) границу над ней и отрендерит её `резервный вариант` в HTML. Содержимое не появится, пока не загрузится клиентский код. +Если какой-либо компонент приостанавливается (например, потому что он определен с [`lazy`](/reference/react/lazy) или извлекает данные), `renderToString` не будет ждать разрешения своего содержимого. Вместо этого `renderToString` найдет ближайшую [``](/reference/react/Suspense) границу над ней и отрендерит её `fallback` в HTML. Содержимое не появится, пока не загрузится клиентский код. Чтобы решить эту проблему, используйте одно из [рекомендуемых решений для потоковой передачи.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) Они могут передавать контент фрагментами по мере его разрешения на сервере, чтобы пользователь видел, что страница постепенно заполняется до загрузки клиентского кода. From cea64ff62f4586724606dd61e3ba641e1b49b20e Mon Sep 17 00:00:00 2001 From: TibidoX <79273248+TibidoX@users.noreply.github.com> Date: Mon, 15 May 2023 15:16:12 +0300 Subject: [PATCH 4/6] Translate renderToString.md --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index c332a03c31..c52f85d3c8 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -119,7 +119,7 @@ const root = createRoot(div); flushSync(() => { root.render(); }); -console.log(div.innerHTML); // For example, "..." +console.log(div.innerHTML); // Например, "..." ``` Вызов [`flushSync`](/reference/react-dom/flushSync) необходим, чтобы DOM обновлялся перед чтением его свойства [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). From 2a769184345a8a9bb4a18442b413828a7adb6ae3 Mon Sep 17 00:00:00 2001 From: TibidoX <79273248+TibidoX@users.noreply.github.com> Date: Mon, 15 May 2023 15:33:55 +0300 Subject: [PATCH 5/6] change link --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index c52f85d3c8..cd31879007 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -122,7 +122,7 @@ flushSync(() => { console.log(div.innerHTML); // Например, "..." ``` -Вызов [`flushSync`](/reference/react-dom/flushSync) необходим, чтобы DOM обновлялся перед чтением его свойства [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). +Вызов [`flushSync`](/reference/react-dom/flushSync) необходим, чтобы DOM обновлялся перед чтением его свойства [`innerHTML`](https://developer.mozilla.org/ru/docs/Web/API/Element/innerHTML). --- From a5dbf0c92602b126468b3fc3150631bc91c4fbe6 Mon Sep 17 00:00:00 2001 From: TibidoX <79273248+TibidoX@users.noreply.github.com> Date: Mon, 22 May 2023 16:38:16 +0300 Subject: [PATCH 6/6] Update src/content/reference/react-dom/server/renderToString.md Co-authored-by: Anton Ahatov --- src/content/reference/react-dom/server/renderToString.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index cd31879007..bc73d7fb73 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -1,5 +1,5 @@ --- -Заголовок: renderToString +title: renderToString ---