ReactDOMServer
Obiekt ReactDOMServer pozwala na renderowanie komponentów do statycznych znaczników. Zazwyczaj jest używany na serwerze Node’owym:
// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');Ogólne informacje
Następujące metody mogą zostać użyte zarówno na serwerze, jak i w przeglądarce:
Kolejne metody zależą od pakietu (stream), który dostępny jest tylko na serwerze, i nie zadziałają w przeglądarce.
Dokumentacja
renderToString()
ReactDOMServer.renderToString(element)Renderuje reactowy element do jego początkowego kodu HTML, zwracając go w formie ciągu znaków. Możesz użyć tej metody, aby wygenerować kod HTML po stronie serwera, a następnie wysłać znaczniki jako odpowiedzi na pierwsze żądanie, aby przyspieszyć ładowanie strony i umożliwić wyszukiwarkom indeksowanie jej w celach SEO.
Jeśli wywołasz metodę ReactDOM.hydrate() na węźle, który zawiera już znaczniki wyrenderowane po stronie serwera, React zachowa je i dołączy jedynie procedury obsługi zdarzeń. Poprawi to wydajność i wrażenia przy pierwszym ładowaniu strony.
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)Działa analogicznie do renderToString z tą różnicą, że nie tworzy dodatkowych atrybutów DOM, takich jak data-reactroot (używanych wewnętrznie przez Reacta). Przydaje się, jeśli chcesz używać Reacta jako prostego generatora statycznych stron, gdzie usunięcie dodatkowych atrybutów pozwoli zaoszczędzić kilka bajtów.
Jeżeli planujesz używać Reacta po stronie klienta w celu dodania znacznikom interaktywności, nie używaj tej metody. Zamiast niej użyj renderToString na serwerze i ReactDOM.hydrate() po stronie klienta.
renderToNodeStream()
ReactDOMServer.renderToNodeStream(element)Renderuje reactowy element do jego początkowego kodu HTML. Zwraca strumień do odczytu, który na wyjściu zwróci ciąg znaków HTML. Zwrócony przez strumień kod HTML jest identyczny z tym, co zwróciłaby funkcja ReactDOMServer.renderToString. Możesz użyć tej metody, aby wygenerować kod HTML po stronie serwera, a następnie wysłać znaczniki jako odpowiedź na pierwsze żądanie, co pozwoli przyspieszyć ładowanie strony i umożliwić wyszukiwarkom indeksowanie jej w celach SEO.
Jeśli wywołasz metodę ReactDOM.hydrate() na węźle, który zawiera już znaczniki wyrenderowane po stronie serwera, React zachowa je i dołączy jedynie procedury obsługi zdarzeń. Poprawi to wydajność i wrażenia przy pierwszym ładowaniu strony.
Uwaga:
Do użycia tylko po stronie serwera. Ten interfejs API nie jest dostępny w przeglądarce.
Strumień zwrócony przez tę metodę zwróci strumień bajtów zakodowany w utf-8. Jeśli potrzebujesz strumienia z innym kodowaniem, skorzystaj na przykład z paczki iconv-lite, która dostarcza strumienie transformujące do transkodowania tekstu.
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)Działa analogicznie do renderToNodeStream, z tą różnicą, że nie tworzy dodatkowych atrybutów DOM, takich jakdata-reactroot (używanych wewnętrznie przez Reacta). Przydaje się, jeśli chcesz używać Reacta jako prostego generatora statycznych stron, gdzie usunięcie dodatkowych atrybutów pozwoli zaoszczędzić kilka bajtów.
Kod HTML zwrócony przez strumień jest identyczny z tym, jaki zwróciłaby funkcja ReactDOMServer.renderToStaticMarkup.
Jeżeli planujesz używać Reacta po stronie klienta w celu dodania znacznikom interaktywności, nie używaj tej metody. Zamiast niej użyj renderToNodeStream na serwerze i ReactDOM.hydrate() po stronie klienta.
Uwaga:
Do użycia tylko po stronie serwera. Ten interfejs API nie jest dostępny w przeglądarce.
Strumień zwrócony przez tę metodę zwróci strumień bajtów zakodowany w utf-8. Jeśli potrzebujesz strumienia z innym kodowaniem, skorzystaj na przykład z paczki iconv-lite, która dostarcza strumienie transformujące do transkodowania tekstu.