API de Referência
Static APIs

resumeAndPrerender

resumeAndPrerender continua uma árvore React pré-renderizada para uma string HTML estática usando um Web Stream.

const { prelude,postpone } = await resumeAndPrerender(reactNode, postponedState, options?)

Note

Esta API depende de Web Streams. Para Node.js, use resumeAndPrerenderToNodeStream em vez disso.

Referência

resumeAndPrerender(reactNode, postponedState, options?)

Chame resumeAndPrerender para continuar uma árvore React pré-renderizada para uma string HTML estática.

import { resumeAndPrerender } from 'react-dom/static';
import { getPostponedState } from 'storage';

async function handler(request, response) {
  const postponedState = getPostponedState(request);
  const { prelude } = await resumeAndPrerender(<App />, postponedState, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}

No cliente, chame hydrateRoot para tornar o HTML gerado pelo servidor interativo.

Veja mais exemplos abaixo.

Parâmetros

  • reactNode: O nó React que você chamou prerender (ou um resumeAndPrerender anterior) com. Por exemplo, um elemento JSX como <App />. Espera-se que ele represente o documento inteiro, então o componente App deve renderizar a tag <html>.
  • postponedState: O objeto postpone opaco retornado de uma API de pré-renderização, carregado de onde quer que você o tenha armazenado (por exemplo, redis, um arquivo ou S3).
  • opcional options: Um objeto com opções de streaming.

Retorna

prerender retorna uma Promise:

  • Se a renderização for bem-sucedida, a Promise será resolvida para um objeto contendo:
    • prelude: um Web Stream de HTML. Você pode usar este stream para enviar uma resposta em pedaços, ou pode ler o stream inteiro em uma string.
    • postponed: um objeto opaco e serializável em JSON que pode ser passado para resume ou resumeAndPrerender se prerender for abortado.
  • Se a renderização falhar, a Promise será rejeitada. Use isso para gerar um shell de fallback.

Ressalvas

nonce não é uma opção disponível ao pré-renderizar. Nonces devem ser únicos por solicitação e se você usar nonces para proteger sua aplicação com CSP seria inadequado e inseguro incluir o valor do nonce na própria pré-renderização.

Note

Quando devo usar resumeAndPrerender?

A API estática resumeAndPrerender é usada para geração estática do lado do servidor (SSG). Ao contrário de renderToString, resumeAndPrerender espera que todos os dados sejam carregados antes de resolver. Isso o torna adequado para gerar HTML estático para uma página inteira, incluindo dados que precisam ser buscados usando Suspense. Para transmitir conteúdo à medida que ele é carregado, use uma API de renderização do lado do servidor (SSR) de streaming como renderToReadableStream.

resumeAndPrerender pode ser abortado e, posteriormente, continuado com outro resumeAndPrerender ou retomado com resume para suportar pré-renderização parcial.

Uso

Leitura adicional

resumeAndPrerender se comporta de forma semelhante a prerender, mas pode ser usado para continuar um processo de pré-renderização iniciado anteriormente que foi abortado. Para mais informações sobre como continuar uma árvore pré-renderizada, veja a documentação do resume.

PreviousprerenderToNodeStream
NextresumeAndPrerenderToNodeStream