renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• Referência
  • renderToNodeStream(reactNode, options?)
• Uso
  • Renderizar uma árvore React para HTML para um Node.js Readable Stream

Referência

renderToNodeStream(reactNode, options?)

Pelo servidor, chame renderToNodeStream para obter um Node.js Readable Stream que você pode encadear para a resposta.

import { renderToNodeStream } from 'react-dom/server';

const stream = renderToNodeStream(<App />);
stream.pipe(response);

Pelo cliente, chame hydrateRoot para tornar o HTML gerado pelo servidor interativo.

Veja mais exemplos abaixo.

Parâmetros

• reactNode: Um nó React que você quer renderizar para HTML. Por exemplo, um elemento JSX como <App />.
• optional options: Um objeto para renderizador de servidor.
  • optional identifierPrefix: Um prefixo de string que o React usa para IDs gerados por useId. Útil para evitar conflitos quando usando múltiplas raizes na mesma página. Deve ser o mesmo prefixo passado para hydrateRoot.

Retorna

Um Node.js Readable Stream que possui uma string HTML como saída.

Ressalvas

• Esse método esperará todas Suspense boundaries completarem antes de retornar qualquer saída.

• No React 18, esse método coloca em buffer toda sua saída, então não proporciona nenhum benefício de fluxo de dados. É por isso que é recomendado que você migre para renderToPipeableStream.

• O fluxo retornado é um fluxo de byte codificado em utf-8. Se você precisa de um fluxo em outra codificação, veja um projeto como iconv-lite, que providencia transformação de fluxos para transcodificação.

Uso

Renderizar uma árvore React para HTML para um Node.js Readable Stream

Chame renderToNodeStream para obter um Node.js Readable Stream que você pode encadear para a resposta de seu servidor:

import { renderToNodeStream } from 'react-dom/server';

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

Esse fluxo produzirá a saída de HTML não-interativa inicial de seus componentes React. Pelo cliente, você precisará chamar hydrateRoot para hidratar esse HTML gerado pelo servidor e torná-lo interativo.