renderToString

const html = renderToString(reactNode)

• Referencia
  • renderToString(reactNode)
• Uso
  • Renderizar un árbol de React como HTML en una cadena de caracteres
• Alternativas
  • Migración de renderToString a un método de transmisión en el servidor
  • Eliminar renderToString del código del cliente
• Solución de problemas
  • Cuando un componente se suspende, el HTML siempre contiene un fallback

Referencia

renderToString(reactNode)

En el servidor, llama a renderToString para renderizar tu aplicación a HTML.

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

const html = renderToString(<App />);

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

Ver más ejemplos abajo.

Parámetros

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

Devuelve

Una cadena de caracteres HTML.

Advertencias

• renderToString tiene un soporte limitado para Suspense. Si un componente suspende, renderToString inmediatamente envía su fallback como HTML.

• renderToString funciona en el navegador, pero no se recomienda usarlo en el código del cliente.

Uso

Renderizar un árbol de React como HTML en una cadena de caracteres

Llama a renderToString para renderizar tu aplicación como una cadena de caracteres HTML que puedes enviar con la respuesta del servidor:

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

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

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

Alternativas

Migración de renderToString a un método de transmisión en el servidor

renderToString devuelve una cadena de caracteres de inmediato, por lo que no admite transmisión (streaming) o espera de datos.

Cuando sea posible, recomendamos utilizar estas alternativas totalmente funcionales:

• Si utilizas Node.js, utiliza renderToPipeableStream.
• Si utilizas Deno o una versión moderna de runtime con Web Streams, utiliza renderToReadableStream.

Puedes continuar utilizando renderToString si tu entorno de servidor no admite streams.

Eliminar renderToString del código del cliente

A veces, se usa renderToString en el cliente para convertir algún componente en HTML.

// 🚩 Innecesario: usar renderToString en el cliente
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // Por ejemplo, "<svg>...</svg>"

Importar react-dom/server en el cliente aumenta innecesariamente el tamaño de tu paquete y debe evitarse. Si necesitas renderizar algún componente como HTML en el navegador, utiliza createRoot y lee el HTML desde el DOM:

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // Por ejemplo, "<svg>...</svg>"

La llamada a flushSync es necesaria para que el DOM se actualice antes de leer su propiedad innerHTML.

Solución de problemas

Cuando un componente se suspende, el HTML siempre contiene un fallback

renderToString no es compatible completamente con Suspense.

Si algún componente se suspende (Por ejemplo, porque está definido con lazy o busca datos), renderToString no esperará a que se resuelva su contenido. En su lugar, renderToString encontrará el límite de <Suspense> más cercano por encima y renderizará su prop fallback en el HTML. El contenido no aparecerá hasta que se cargue el código del cliente.

Para resolver esto, utiliza una de las soluciones de streaming recomendadas. Pueden transmitir contenido en trozos a medida que se resuelve en el servidor para que el usuario vea cómo se rellena la página progresivamente antes de que se cargue el código del cliente.