ReactDOMServer
Об’єкт ReactDOMServer дає змогу рендерити компоненти у статичну розмітку. Як правило, він використовується на Node сервері:
// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');Огляд
Наступні методи можуть бути використані і на сервері, і у середовищах браузера:
А ці додаткові методи залежать від пакунку (stream), який доступний тільки на сервері і не працюватиме у браузері.
Довідка
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 stream), який виводить HTML-рядок. Вивід HTML цього потоку в точності дорівнює тому, що ReactDOMServer.renderToString поверне. Цей метод можна використовувати для створення HTML на сервері та надсилання цієї розмітки на початковому запиті для більш швидкого завантаження сторінок. Це також дозволяє пошуковим системам сканувати ваші сторінки для цілей SEO.
Якщо ви викликаєте ReactDOM.hydrate() на вузлі, який вже відрендерив на сервері цю розмітку, то React збереже її і додасть обробники подій, дозволяючи вам мати дуже продуктивне завантаження.
Note:
Цей API недоступний у браузерах — тільки для серверів.
Потік, повернений з цього методу поверне потік байтів закодованих у utf-8. Якщо вам потрібен потік в іншому кодуванні, перегляньте проект типу iconv-lite, який забезпечує перетворення потоків для перекодування тексту.
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)Аналогічно renderToNodeStream, за винятком того, що він не створює додаткових атрибутів DOM, які React використовує внутрішньо, наприклад data-reactroot. Це корисно, якщо ви хочете використовувати React, як генератор простих статичних сторінок, оскільки видалення атрибутів може зберегти декілька байтів.
Вихідний HTML цього потоку в точності дорівнює тому, що ReactDOMServer.renderToStaticMarkup поверне.
Якщо ви плануєте використовувати React на клієнтській стороні, щоб зробити розмітку інтерактивною, то не використовуйте цей метод. Замість цього використовуйте renderToNodeStream на сервері та ReactDOM.hydrate() на клієнті.
Note:
Цей API недоступний у браузерах — тільки для серверів.
Потік, повернений з цього методу поверне потік байтів закодованих у utf-8. Якщо вам потрібен потік в іншому кодуванні, перегляньте проект типу iconv-lite, який забезпечує перетворення потоків для перекодування тексту.