renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• Referência
  • renderToStaticMarkup(reactNode, options?)
• Uso
  • Renderizando uma árvore React não interativa como HTML para uma string

Referência

renderToStaticMarkup(reactNode, options?)

No servidor, chame renderToStaticMarkup para renderizar seu aplicativo para HTML.

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

const html = renderToStaticMarkup(<Page />);

Ele produzirá saída HTML não interativa de seus componentes React.

Veja mais exemplos abaixo.

Parâmetros

• reactNode: Um nó React que você deseja renderizar em HTML. Por exemplo, um nó JSX como <Page />.
• opcional options: Um objeto para renderização no servidor.
  • opcional identifierPrefix: Um prefixo de string que o React usa para IDs gerados por useId. Útil para evitar conflitos ao usar vários roots na mesma página.

Retorna

Uma string HTML.

Ressalvas

• A saída de renderToStaticMarkup não pode ser hidratada.

• renderToStaticMarkup tem suporte limitado para Suspense. Se um componente suspender, renderToStaticMarkup envia imediatamente seu fallback como HTML.

• renderToStaticMarkup funciona no navegador, mas usá-lo no código do cliente não é recomendado. Se você precisar renderizar um componente para HTML no navegador, obtenha o HTML renderizando-o em um nó DOM.

Uso

Renderizando uma árvore React não interativa como HTML para uma string

Chame renderToStaticMarkup para renderizar seu aplicativo em uma string HTML que você pode enviar com sua resposta do servidor:

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

// A sintaxe do manipulador de rota depende da sua estrutura de backend
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});

Isso produzirá a saída HTML inicial não interativa de seus componentes React.