renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• Referencia
  • renderToStaticMarkup(reactNode, options?)
• Uso
  • Renderizar un árbol React no interactivo como HTML en un string

Referencia

renderToStaticMarkup(reactNode, options?)

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