renderToStaticMarkup renderiza un árbol React no interactivo a un string de HTML.

const html = renderToStaticMarkup(reactNode)

Referencia

renderToStaticMarkup(reactNode)

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

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

const html = renderToStaticMarkup(<Page />);

Esto producirá una salida de HTML no interactiva de tus componentes de React.

Ver más ejemplos abajo.

Parámetros

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

Devuelve

Un string de HTML.

Advertencias

  • La salida de renderToStaticMarkup no puede ser hidratada.

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

  • renderToStaticMarkup funciona en el navegador, pero usarlo en el código del cliente no es recomendable. Si necesitas renderizar un componente a HTML en el navegador, obtén el HTML renderizándolo en un nodo DOM.


Uso

Renderizar un árbol React no interactivo como HTML en un string

Llama a renderToStaticMarkup para renderizar tu aplicación a un string de HTML que puedas enviar con la respuesta del servidor:

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

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

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

Atención

Este método renderiza HTML no interactivo que no puede ser hidratado. Esto es útil si deseas usar React como un generador de páginas estáticas simple, o si estás renderizando contenido completamente estático, como correos electrónicos.

Las aplicaciones interactivas deben usar renderToString en el servidor y hydrateRoot en el cliente.