ReactDOMServer

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

// ES-модули
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

Обзор

В окружении сервера и браузера могут использоваться методы:

• renderToString()
• renderToStaticMarkup()

Следующие методы зависят от пакета stream, поэтому доступны только на сервере и не будут работать в браузере.

• renderToNodeStream()
• renderToStaticNodeStream()

Справочник

renderToString()

ReactDOMServer.renderToString(element)

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

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

renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

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

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

renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

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

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

Примечание:

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

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

renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

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

Поток выводит HTML, идентичный тому, что возвращает ReactDOMServer.renderToStaticMarkup.

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

Примечание:

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

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