Skip to content

resumeToPipeableStream.md

Latest commit

 

History

History
78 lines (52 loc) · 5.18 KB

resumeToPipeableStream.md

File metadata and controls

78 lines (52 loc) · 5.18 KB
title resumeToPipeableStream

resumeToPipeableStream transmite uma árvore React pré-renderizada para um Stream do Node.js "pipeable".

const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, options?)

Esta API é específica para o Node.js. Ambientes com Web Streams, como Deno e runtimes de edge modernos, devem usar resume em vez disso.

Referência {/reference/}

resumeToPipeableStream(node, postponed, options?) {/resume-to-pipeable-stream/}

Chame resume para retomar a renderização de uma árvore React pré-renderizada como HTML em um Stream do Node.js.

import { resume } from 'react-dom/server';
import {getPostponedState} from './storage';

async function handler(request, response) {
  const postponed = await getPostponedState(request);
  const {pipe} = resumeToPipeableStream(<App />, postponed, {
    onShellReady: () => {
      pipe(response);
    }
  });
}

Veja mais exemplos abaixo.

Parâmetros {/parameters/}

  • reactNode: O nó React com o qual você chamou prerender. 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 opaco postpone retornado por uma API de prerender, 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.
    • opcional nonce: Uma string nonce para permitir scripts para script-src Content-Security-Policy.
    • opcional signal: Um sinal abortar que permite abortar a renderização do servidor e renderizar o restante no cliente.
    • opcional onError: Um callback que é acionado sempre que ocorre um erro no servidor, seja recuperável ou não. Por padrão, isso apenas chama console.error. Se você o substituir para registrar relatórios de falha, certifique-se de ainda chamar console.error.
    • opcional onShellReady: Um callback que é acionado logo após a shell ter terminado. Você pode chamar pipe aqui para começar a transmitir. O React transmitirá o conteúdo adicional após a shell, juntamente com as tags <script> inline que substituem os fallbacks de carregamento HTML pelo conteúdo.
    • opcional onShellError: Um callback que é acionado se ocorrer um erro ao renderizar a shell. Ele recebe o erro como argumento. Nenhum byte foi emitido do stream ainda, e nem onShellReady nem onAllReady serão chamados, então você pode gerar uma shell HTML de fallback ou usar o prelúdio.

Retorna {/returns/}

resume retorna um objeto com dois métodos:

Ressalvas {/caveats/}

  • resumeToPipeableStream não aceita opções para bootstrapScripts, bootstrapScriptContent ou bootstrapModules. Em vez disso, você precisa passar essas opções para a chamada prerender que gera o postponedState. Você também pode injetar conteúdo bootstrap no stream gravável manualmente.
  • resumeToPipeableStream não aceita identifierPrefix, pois o prefixo precisa ser o mesmo em prerender e resumeToPipeableStream.
  • Como nonce não pode ser fornecido ao prerender, você só deve fornecer nonce a resumeToPipeableStream se não estiver fornecendo scripts ao prerender.
  • resumeToPipeableStream re-renderiza da raiz até encontrar um componente que não foi totalmente pré-renderizado. Apenas Componentes totalmente pré-renderizados (o Componente e seus filhos terminaram de pré-renderizar) são pulados inteiramente.

Uso {/usage/}

Leitura adicional {/further-reading/}

O resumo se comporta como renderToReadableStream. Para mais exemplos, confira a seção de uso de renderToReadableStream. A seção de uso de prerender inclui exemplos de como usar prerenderToNodeStream especificamente.