renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• Referencia
  • renderToNodeStream(reactNode, options?)
• Uso
  • Renderizar un árbol de React como HTML en un stream legible de Node.js

Referencia

renderToNodeStream(reactNode, options?)

En el servidor, llama a renderToNodeStream para obtener un Stream legible de Node.js que puedes enviar al flujo de la respuesta.

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

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

En el cliente, llama a hydrateRoot para hacer interactivo el HTML generado por el servidor.

Ver más ejemplos abajo.

Parámetros

• reactNode: Un nodo de React que deseas representar en HTML. Por ejemplo, un elemento JSX como <App />.

• opcional options: Un objeto de configuración para el renderizado en el servidor.

  • opcional identifierPrefix: Un prefijo de string que React utiliza para los IDs generados por useId. Es útil para evitar conflictos cuando se utilizan múltiples raíces en la misma página. Debe ser el mismo prefijo que se pasa a hydrateRoot.

Devuelve

Un Stream legible de Node.js que produce una cadena de HTML.

Advertencias

• Este método esperará a que todas las Suspense boundaries se completen antes de devolver cualquier resultado.

• A partir de React 18, este método almacena en búfer toda su salida, por lo que no ofrece realmente ningún beneficio de transmisión. Por esta razón, se recomienda que en su lugar migres a renderToPipeableStream.

• El stream devuelto es un flujo de bytes codificado en utf-8. Si necesitas un stream en otra codificación, echa un vistazo a un proyecto como iconv-lite, que proporciona streams de transformación para la transcodificación de texto.

Uso

Renderizar un árbol de React como HTML en un stream legible de Node.js

Llama a renderToNodeStream para obtener un Stream legible de Node.js que puedes canalizar a la respuesta de tu servidor:

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

// La sintaxis del manejador de rutas depende de tu framework de backend.
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

El stream producirá la salida inicial no interactiva de HTML de tus componentes de React. En el cliente, deberás llamar a hydrateRoot para hidratar el HTML generado por el servidor y hacerlo interactivo.