ReactDOMServer

Объект ReactDOMServer позволяет вам рендерить компоненты в статический разметку. Обычно он используется на сервере Node:

// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

Обзор

Следующие методы могут быть использованы как на сервере, так и в браузере:

• renderToString()
• renderToStaticMarkup()

Эти дополнительные методы зависят от пакета (stream), который доступен только на сервере и не будет работать в браузере.

• renderToNodeStream()
• renderToStaticNodeStream()

Справочник

renderToString()

ReactDOMServer.renderToString(element)

Рендерит React элемент в исходный HTML. React вернёт строку HTML. Вы можете использовать этот метод для генерации HTML на сервере и отправки разметки в начальном запросе для ускорения загрузки страницы и для того, чтобы поисковые системы могли индексировать ваши страницы для целей SEO.

Если вы вызываете ReactDOM.hydrate() на узле, который уже содержит эту сгенерированную на сервере разметку, React сохранит её и только прикрепит обработчики событий, позволяя вам получить очень быструю загрузку в первый раз.

renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

Аналогично renderToString, за исключением того, что он не создаёт дополнительных атрибутов DOM, которые React использует во внутренней работе, таких как data-reactroot. Это полезно, если вы хотите использовать React как простой генератор статических страниц, так как удаление дополнительных атрибутов может сэкономить несколько байтов.

Если вы планируете использовать React в браузере для интерактивности разметки, не используйте этот метод. Вместо этого используйте renderToString на сервере и ReactDOM.hydrate() в браузере.

renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

Рендерит React элемент в исходный HTML. Возвращает потоковый объект Readable, который выводит строку HTML. Выходной HTML-код этого потока точно такой же, как у ReactDOMServer.renderToString. Вы можете использовать этот метод для генерации HTML на сервере и отправки разметки в начальном запросе для ускорения загрузки страницы и для того, чтобы поисковые системы могли индексировать ваши страницы для целей SEO.

Если вы вызываете ReactDOM.hydrate() на узле, который уже содержит эту сгенерированную на сервере разметку, React сохранит её и только прикрепит обработчики событий, позволяя вам получить очень быструю загрузку в первый раз.

Примечание:

Только для сервера. Этот API недоступен в браузере.

Поток, возвращаемый этим методом, вернёт байтовый поток, закодированный в utf-8. Если вам нужен поток в другом кодировании, обратитесь к проекту, например, iconv-lite, который предоставляет потоки преобразования для транскодирования текста.

renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

Аналогично renderToNodeStream, за исключением того, что он не создаёт дополнительных атрибутов DOM, которые React использует во внутренней работе, таких как data-reactroot. Это полезно, если вы хотите использовать React как простой генератор статических страниц, так как удаление дополнительных атрибутов может сэкономить несколько байтов.

Выходной HTML-код этого потока точно такой же, как у ReactDOMServer.renderToStaticMarkup.

Если вы планируете использовать React в браузере для интерактивности разметки, не используйте этот метод. Вместо этого используйте renderToNodeStream на сервере и ReactDOM.hydrate() в браузере.

Примечание:

Только для сервера. Этот API недоступен в браузере.

Поток, возвращаемый этим методом, вернёт байтовый поток, закодированный в utf-8. Если вам нужен поток в другом кодировании, обратитесь к проекту, например, iconv-lite, который предоставляет потоки преобразования для транскодирования текста.