renderToStaticMarkup
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.
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
renderToStaticMarkupno puede ser hidratada. -
renderToStaticMarkuptiene un soporte limitado para Suspense. Si un componente se suspende,renderToStaticMarkupinmediatamente envía su fallback como HTML. -
renderToStaticMarkupfunciona 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.