Unetway

ReactJS - ReactDOMServer

ReactDOMServer объект позволяет оказывать компоненты в статическую разметку. Как правило, он используется на сервере узлов:

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

Overview

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

  • renderToString()
  • renderToStaticMarkup()

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

  • renderToNodeStream()
  • renderToStaticNodeStream()

Reference

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

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

Заметка:

Server-only. Этот API недоступен в браузере.

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

renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

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

Вывод HTML этим потоком точно равен ReactDOMServer.renderToStaticMarkup возвращаемому.

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

Заметка:

Server-only. Этот API недоступен в браузере.

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