ReactDOMServer
A ReactDOMServer objektum komponensek statikus sémává való renderelését teszi lehetővé. Tipikusan egy Node szerveren használt:
// ES modulok
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');Áttekintés
A következő metódusok mind böngésző-, és szerverkörnyezetben is használhatóak:
Ezek a további metódusok függenek a stream csomagtól, tehát csak a szerveren elérhetőek és nem fognak működni a böngészőben.
Referencia
renderToString()
ReactDOMServer.renderToString(element)Egy React elemet renderel annak kezdetleges HTML formájába. A React egy HTML sztringet ad vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából.
Ha a ReactDOM.hydrate() metódust egy olyan csomóponton hívod meg, ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt.
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)A renderToString-hez hasonló, kivéve, hogy nem hoz létre extra DOM attribútumokat - mint például a data-reactroot - amiket a React belsőleg használ. Ez akkor hasznos, ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani.
Ha a Reactet a kliens oldalon tervezed használni, hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a renderToString-t a szerveren és a ReactDOM.hydrate()-t a kliensen.
renderToNodeStream()
ReactDOMServer.renderToNodeStream(element)Egy React elemet renderel annak kezdetleges HTML formájába. Egy Readable stream-et ad vissza, ami pedig egy HTML sztringet. A folyam HTML kimenete tökéletesen megegyezik azzal, amit a ReactDOMServer.renderToString adna vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából.
Ha a ReactDOM.hydrate() metódust egy olyan csomóponton hívod meg, ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt.
Megjegyzés:
Csakis a szerveren működik. Ez az API nem elérhető a böngészőben.
Az ezen metódus által visszaadott folyam (stream) egy utf-8-ban kódolt bájtfolyamot ad vissza. Ha a folyamra egy másik kódolási formában van szükséged, nézz utána projekteknek mint például az iconv-lite, ami folyamok transzformálását teszi lehetővé szövegek transzkódolásához.
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)A renderToNodeStream-hez hasonló, kivéve, hogy nem hoz létre extra DOM attribútumokat - mint például a data-reactroot - amiket a React belsőleg használ. Ez akkor hasznos, ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani.
A folyam HTML kimenete tökéletesen megegyezik azzal, amit a ReactDOMServer.renderToStaticMarkup adna vissza.
Ha a Reactet a kliens oldalon tervezed használni, hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a renderToNodeStream-t a szerveren és a ReactDOM.hydrate()-t a kliensen.
Megjegyzés:
Csakis a szerveren működik. Ez az API nem elérhető a böngészőben.
Az ezen metódus által visszaadott folyam (stream) egy utf-8-ban kódolt bájtfolyamot ad vissza. Ha a folyamra egy másik kódolási formában van szükséged, nézz utána projekteknek mint például az iconv-lite, ami folyamok transzformálását teszi lehetővé szövegek transzkódolásához.