renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode, options?)

• Referencia
  • renderToStaticNodeStream(reactNode, options?)
• Uso
  • Renderizar un árbol de React como HTML estático a un Stream legible de Node.js

Referencia

renderToStaticNodeStream(reactNode, options?)

En el servidor, llama a renderToStaticNodeStream para obtener un Stream legible de Node.js.

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

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

Ver más ejemplos abajo.

El stream producirá, en la salida, HTML no interactivo de tus componentes de React.

Parámetros

• reactNode: Un nodo de React que quieres renderizar a HTML. Por ejemplo, un elemento JSX como <Page />.

• 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.

Devuelve

Un Stream legible de Node.js que produce un string HTML como salida. El HTML resultante no puede hidratarse en el cliente.

Advertencias

• La salida de renderToStaticNodeStream no puede ser hidratada.

• Este método va a esperar que todas las barreras de Suspense se completen antes de devolver alguna salida.

• 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.

• 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 estático a un Stream legible de Node.js

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

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

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

El stream producirá la salida inicial no interactiva de HTML de tus componentes de React.