renderToNodeStream
renderToNodeStream
renderiza un árbol de React en un Stream legible de Node.js.
const stream = renderToNodeStream(reactNode)
Referencia
renderToNodeStream(reactNode)
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.
Parámetros
reactNode
: Un nodo de React que deseas representar en HTML. Por ejemplo, un elemento JSX como<App />
.
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.