Об’єкт ReactDOMServer дає змогу рендерити компоненти у статичну розмітку. Як правило, він використовується на Node сервері:
// ES modules\nimport ReactDOMServer from 'react-dom/server';\n// CommonJS\nvar ReactDOMServer = require('react-dom/server');Наступні методи можуть бути використані і на сервері, і у середовищах браузера:
\n\nА ці додаткові методи залежать від пакунку (stream), який доступний тільки на сервері і не працюватиме у браузері.
renderToString() ReactDOMServer.renderToString(element)Відрендерить React-елемент до початкового HTML. React поверне HTML-рядок. Цей метод можна використовувати для створення HTML на сервері та надсилання цієї розмітки на початковому запиті для більш швидкого завантаження сторінок. Це також дозволяє пошуковим системам сканувати ваші сторінки для цілей SEO.
\nЯкщо ви викликаєте 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 збереже її і додасть обробники подій, дозволяючи вам мати дуже продуктивне завантаження.
\n\nNote:
\nЦей API недоступний у браузерах — тільки для серверів.
\nПотік, повернений з цього методу поверне потік байтів закодованих у utf-8. Якщо вам потрібен потік в іншому кодуванні, перегляньте проект типу iconv-lite, який забезпечує перетворення потоків для перекодування тексту.
\n
renderToStaticNodeStream() ReactDOMServer.renderToStaticNodeStream(element)Аналогічно renderToNodeStream, за винятком того, що він не створює додаткових атрибутів DOM, які React використовує внутрішньо, наприклад data-reactroot. Це корисно, якщо ви хочете використовувати React, як генератор простих статичних сторінок, оскільки видалення атрибутів може зберегти декілька байтів.
Вихідний HTML цього потоку в точності дорівнює тому, що ReactDOMServer.renderToStaticMarkup поверне.
Якщо ви плануєте використовувати React на клієнтській стороні, щоб зробити розмітку інтерактивною, то не використовуйте цей метод. Замість цього використовуйте renderToNodeStream на сервері та ReactDOM.hydrate() на клієнті.
\n","frontmatter":{"title":"ReactDOMServer","next":null,"prev":null},"fields":{"path":"content/docs/reference-react-dom-server.md","slug":"docs/react-dom-server.html"}}},"pageContext":{"slug":"docs/react-dom-server.html"}},"staticQueryHashes":[]}Note:
\nЦей API недоступний у браузерах — тільки для серверів.
\nПотік, повернений з цього методу поверне потік байтів закодованих у utf-8. Якщо вам потрібен потік в іншому кодуванні, перегляньте проект типу iconv-lite, який забезпечує перетворення потоків для перекодування тексту.
\n