ReactDOMServer

O objeto ReactDOMServer permite que você renderize componentes para markup estático. Normalmente, é 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. Você pode 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 rastreiem suas páginas para fins de SEO.

Se você invocar ReactDOM.hydrate() em um nó que já tem o seu markup processado pelo servidor, o React vai preservá-lo e apenas atribuir manipuladores de eventos, permitindo que você tenha uma experiência de primeiro carregamento muito eficiente.


renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

Semelhante a renderToString, exceto que este não cria atributos DOM extras que o React usa internamente, como data-reactroot. Isso é útil se você quiser usar o React como um simples gerador de páginas estáticas, já que remover os atributos extras pode economizar alguns bytes.

Se você planeja usar o React no cliente para tornar o markup interativo, não use este método. Em vez disso, use renderToString no servidor e ReactDOM.hydrate() no cliente.


renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

Renderiza um elemento React para seu HTML inicial. Retorna um Readable Stream que gera uma string HTML. A saída HTML desse stream é exatamente igual à que ReactDOMServer.renderToString retornaria. Você pode 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 rastreiem suas páginas para fins de SEO.

Se você invocar ReactDOM.hydrate() em um nó que já tem o seu markup processado pelo servidor, o React vai preservá-lo e apenas atribuir manipuladores de eventos, permitindo que você tenha uma experiência de primeiro carregamento muito eficiente.

Nota:

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

O stream retornado deste método retornará um stream de bytes codificado em utf-8. Se você precisar de um stream em outra codificação, dê uma olhada em um projeto como o iconv-lite, que fornece streams de transformação para transcodificação de texto.


renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

Semelhante a renderToNodeStream, exceto que este não cria atributos DOM extras que o React usa internamente, como data-reactroot. Isso é útil se você quiser usar o React como um simples gerador de páginas estáticas, já que remover os atributos extras pode economizar alguns bytes.

A saída HTML desse stream é exatamente igual ao que ReactDOMServer.renderToStaticMarkup retornaria.

Se você planeja usar o React no cliente para tornar o markup interativo, não use este método. Em vez disso, use renderToNodeStream no servidor e ReactDOM.hydrate() no cliente.

Nota:

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

O stream retornado deste método retornará um stream de bytes codificado em utf-8. Se você precisar de um stream em outra codificação, dê uma olhada em um projeto como o iconv-lite, que fornece streams de transformação para transcodificação de texto.