4.4 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. Это следует использовать только на сервере. React вернет HTML-строку. Вы можете использовать этот метод для генерации HTML-кода на сервере и отправки разметки по первоначальному запросу для более быстрой загрузки страниц и для того, чтобы поисковые системы могли сканировать ваши страницы для целей SEO.

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

renderToStaticMarkup()

Код

    
  ReactDOMServer.renderToStaticMarkup(element)

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

renderToNodeStream()

Код

    
  ReactDOMServer.renderToNodeStream(element)

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

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

Замечание.

Актуально только для сервера.

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

renderToStaticNodeStream()

Код

    
  ReactDOMServer.renderToStaticNodeStream(element)

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

HTML-вывод этого потока в точности равен результату, возвращаемому ReactDOMServer.renderToStaticMarkup.

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

Замечание.

Актуально только для сервера.