ReactDOMServer

O objecto ReactDOMServer permite que renderizes os teus componentes em markup estático. Geralmente, é usado em um servidor Node:

// Módulos ES
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

Visão Geral

Os métodos a seguir podem ser usados tanto em ambiente de servidor como de navegador:

Estes métodos adicionais dependem do pacote (stream) que só está disponível no servidor e não irão funcionar no navegador.


Referência

renderToString()

ReactDOMServer.renderToString(element)

Renderiza um elemento React para o seu HTML inicial. O React retornará uma string HTML. Podes usar este método para gerar HTML no servidor e enviar o markup no request inicial para ter carregamentos de páginas mais rápidos e para permitir que motores de pesquisa indexem as tuas páginas para fins de SEO.

Se invocares o método ReactDOM.hydrate() em um nó (node) que já tem o seu markup processado pelo servidor, o React vai preservá-lo e apenas atribuir manipuladores de eventos (event handlers), permitindo que tenhas uma experiência muito eficiente no primeiro carregamento.


renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

Semelhante à renderToString, excepto que este não cria atributos DOM adicionais que o React usa internamente, como data-reactroot. Isto é útil se quiseres usar o React como um simples gerador de páginas estáticas, já que remover os atributos adicionais pode economizar alguns bytes.

Se tens planos de usar o React no cliente para tornar o markup interactivo, não uses este método. Em vez disso, usa renderToString no servidor e ReactDOM.hydrate() no cliente.


renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

Renderiza um elemento React para o teu HTML inicial. Retorna um Readable Stream que gera uma string HTML. A saída HTML deste stream é exactamente igual à que ReactDOMServer.renderToString retornaria. Podes usar este método para gerar HTML no servidor e enviar o markup no request inicial para ter carregamentos de página mais rápidos e para permitir que motores de busca indexem as tuas páginas para fins de SEO.

Se invocares o método ReactDOM.hydrate() em um nó (node) que já tem o seu markup processado pelo servidor, o React vai preservá-lo e apenas atribuir manipuladores de eventos (event handlers), permitindo que tenhas uma experiência muito eficiente no primeiro carregamento.

Nota:

Apenas para servidor. Esta API não está disponível no navegador.

O stream retornado por este método retornará um stream de bytes (byte stream) codificado em utf-8. Se precisares de um stream em outra codificação, vê projectos como o iconv-lite, que fornecem streams de transformação para transcodificação de texto.


renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

Semelhante à renderToNodeStream, excepto que este não cria atributos DOM adicionais que o React usa internamente, como data-reactroot. Isto é útil se quiseres usar o React como um simples gerador de páginas estáticas, já que remover os atributos adicionais pode economizar alguns bytes.

A saída HTML deste stream é exactamente igual à que ReactDOMServer.renderToStaticMarkup retornaria.

Se tens planos de usar o React no cliente para tornar o markup interactivo, não uses este método. Em vez disso, usa renderToNodeStream no servidor e ReactDOM.hydrate() no cliente.

Nota:

Apenas para servidor. Esta API não está disponível no navegador.

O stream retornado por este método retornará um stream de bytes (byte stream) codificado em utf-8. Se precisares de um stream em outra codificação, vê projectos como o iconv-lite, que fornecem streams de transformação para transcodificação de texto.