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

Ако извикате ReactDOM.hydrate() на елемент, който вече има маркъп рендериран на сървъра, React ще го запази и само ще му закачи слушателите за събития, позволявайки ви да имате много бързо първо зареждане.

Бележка:

Само на сървъра. Това API не е достъпно в браузъра.

Стрийма върнат от този метод ще върне бит стрийм енкоднат в utf-8. Ако се нуждаете от стрийм в друг енкодинг, разгледайте проект като iconv-lite, който предоставя трансформиращи стриймове за транскодиращ текст.


renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

Същото като renderToNodeStream, с изключение, че това не създава допълнителни DOM атрибути, които React използва вътрешно, като data-reactroot. Това е полезно ако искате да използвате React, като прост генератор на статични страници, като отстраняване на допълнителните атрибути може да спаси няколко бита.

HTML резултата от този стрийм е точно равен на това което ReactDOMServer.renderToStaticMarkup ще върне.

Ако планувате да използвате React на клиента, за да направите маркъпа подвижен, не използвайте този метод. Вместо това използвайте renderToNodeStream на сървъра и ReactDOM.hydrate() на клиента.

Бележка:

Само на сървъра. Това API не е достъпно в браузъра.

Стрийма върнат от този метод ще върне бит стрийм енкоднат в utf-8. Ако се нуждаете от стрийм в друг енкодинг, разгледайте проект като iconv-lite, който предоставя трансформиращи стриймове за транскодиращ текст.