diff --git a/content/docs/reference-react-dom-server.md b/content/docs/reference-react-dom-server.md index 80c030377..0a142c475 100644 --- a/content/docs/reference-react-dom-server.md +++ b/content/docs/reference-react-dom-server.md @@ -6,7 +6,7 @@ category: Reference permalink: docs/react-dom-server.html --- -The `ReactDOMServer` object enables you to render components to static markup. Typically, it's used on a Node server: +Об'єкт `ReactDOMServer` дає змогу рендерити компоненти у статичну розмітку. Як правило, він використовується на Node сервері: ```js // ES modules @@ -15,21 +15,21 @@ import ReactDOMServer from 'react-dom/server'; var ReactDOMServer = require('react-dom/server'); ``` -## Overview {#overview} +## Огляд {#overview} -The following methods can be used in both the server and browser environments: +Наступні методи можуть бути використані і на сервері, і у середовищах браузера: - [`renderToString()`](#rendertostring) - [`renderToStaticMarkup()`](#rendertostaticmarkup) -These additional methods depend on a package (`stream`) that is **only available on the server**, and won't work in the browser. +А ці додаткові методи залежать від пакунку (`stream`), який **доступний тільки на сервері** і не працюватиме у браузері. - [`renderToNodeStream()`](#rendertonodestream) - [`renderToStaticNodeStream()`](#rendertostaticnodestream) * * * -## Reference {#reference} +## Довідка {#reference} ### `renderToString()` {#rendertostring} @@ -37,9 +37,9 @@ These additional methods depend on a package (`stream`) that is **only available ReactDOMServer.renderToString(element) ``` -Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. +Відрендерить React-елемент до початкового HTML. React поверне HTML-рядок. Цей метод можна використовувати для створення HTML на сервері та надсилання цієї розмітки на початковому запиті для більш швидкого завантаження сторінок. Це також дозволяє пошуковим системам сканувати ваші сторінки для цілей SEO. -If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience. +Якщо ви викликаєте [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) на вузлі, який вже відрендерив на сервері цю розмітку, то React збереже її і додасть обробники подій, дозволяючи вам мати дуже продуктивне завантаження. * * * @@ -49,9 +49,9 @@ If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that ReactDOMServer.renderToStaticMarkup(element) ``` -Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes. +Цей метод подібний до [`renderToString`](#rendertostring), за винятком того, що він не створює додаткових атрибутів DOM, які React використовує внутрішньо, наприклад `data-reactroot`. Це корисно, якщо ви хочете використовувати React, як генератор простих статичних сторінок, оскільки видалення атрибутів може зберегти декілька байтів. -If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToString`](#rendertostring) on the server and [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on the client. +Якщо ви плануєте використовувати React на клієнтській стороні, щоб зробити розмітку інтерактивною, то не використовуйте цей метод. Замість цього використовуйте [`renderToString`](#rendertostring) на сервері та [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) клієнті. * * * @@ -61,15 +61,15 @@ If you plan to use React on the client to make the markup interactive, do not us ReactDOMServer.renderToNodeStream(element) ``` -Render a React element to its initial HTML. Returns a [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams) that outputs an HTML string. The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToString`](#rendertostring) would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. +Відрендерить React-елемент до початкового HTML. Потім поверне [Зчитуваний потік (Readable stream)](https://nodejs.org/api/stream.html#stream_readable_streams), який виводить HTML-рядок. Вивід HTML цього потоку в точності дорівнює тому, що [`ReactDOMServer.renderToString`](#rendertostring) поверне. Цей метод можна використовувати для створення HTML на сервері та надсилання цієї розмітки на початковому запиті для більш швидкого завантаження сторінок. Це також дозволяє пошуковим системам сканувати ваші сторінки для цілей SEO. -If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience. +Якщо ви викликаєте [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) на вузлі, який вже відрендерив на сервері цю розмітку, то React збереже її і додасть обробники подій, дозволяючи вам мати дуже продуктивне завантаження. > Note: > -> Server-only. This API is not available in the browser. +> Цей API недоступний у браузерах — тільки для серверів. > -> The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. +> Потік, повернений з цього методу поверне потік байтів закодованих у utf-8. Якщо вам потрібен потік в іншому кодуванні, перегляньте проект типу [iconv-lite](https://www.npmjs.com/package/iconv-lite), який забезпечує перетворення потоків для перекодування тексту. * * * @@ -79,14 +79,14 @@ If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that ReactDOMServer.renderToStaticNodeStream(element) ``` -Similar to [`renderToNodeStream`](#rendertonodestream), except this doesn't create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes. +Аналогічно [`renderToNodeStream`](#rendertonodestream), за винятком того, що він не створює додаткових атрибутів DOM, які React використовує внутрішньо, наприклад `data-reactroot`. Це корисно, якщо ви хочете використовувати React, як генератор простих статичних сторінок, оскільки видалення атрибутів може зберегти декілька байтів. -The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) would return. +Вихідний HTML цього потоку в точності дорівнює тому, що [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) поверне. -If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToNodeStream`](#rendertonodestream) on the server and [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on the client. +Якщо ви плануєте використовувати React на клієнтській стороні, щоб зробити розмітку інтерактивною, то не використовуйте цей метод. Замість цього використовуйте [`renderToNodeStream`](#rendertonodestream) на сервері та [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) на клієнті. > Note: > -> Server-only. This API is not available in the browser. +> Цей API недоступний у браузерах — тільки для серверів. > -> The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. +> Потік, повернений з цього методу поверне потік байтів закодованих у utf-8. Якщо вам потрібен потік в іншому кодуванні, перегляньте проект типу [iconv-lite](https://www.npmjs.com/package/iconv-lite), який забезпечує перетворення потоків для перекодування тексту.