Hidratação seletiva e HTML em fluxo
Use limites Suspense para transmitir blocos de HTML e hidratar primeiro as ilhas interativas.
Hidratação seletiva e HTML em fluxo é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
O problema da hidratação da página inteira
O SSR tradicional hidrata a página inteira de uma só vez. Se uma parte da página tiver muito JavaScript (como um mapa ou gráfico), isso impede a hidratação do restante — incluindo botões interativos simples.
HTML por transmissão contínua com renderToPipeableStream
A API de transmissão contínua do React 18 envia o HTML em blocos. A estrutura base da página chega imediatamente; os limites de Suspense preenchem o conteúdo conforme ele é resolvido — os usuários veem a interface antes que todos os dados estejam prontos.
const { pipe } = renderToPipeableStream(<App />, {
bootstrapScripts: ['/bundle.js'],
onShellReady() {
res.setHeader('content-type', 'text/html');
pipe(res);
},
onError(error) {
console.error(error);
},
});Como a transmissão contínua funciona na prática
O React renderiza imediatamente os componentes que não são suspensos (a estrutura base). Quando os dados de um limite de Suspense são resolvidos, o React envia um bloco HTML para preenchê-lo, além de uma tag de script que instrui o navegador sobre onde colocá-lo.
Hidratação seletiva
Com a transmissão contínua, o React 18 pode hidratar os componentes independentemente. Se o usuário clicar em um elemento que ainda não foi hidratado, o React priorizará a hidratação desse componente e continuará com o restante.
Limites de Suspense como unidades de transmissão
Cada limite de <Suspense> é uma unidade de transmissão. O conteúdo alternativo é enviado imediatamente; o conteúdo real é transmitido posteriormente. Aninhe limites de Suspense para transmitir no nível de granularidade adequado.
function App() {
return (
<Layout>
{/* Streams first — no data needed */}
<Header />
<Suspense fallback={<ArticleSkeleton />}>
{/* Streams when article data resolves */}
<Article />
</Suspense>
<Suspense fallback={<CommentsSkeleton />}>
{/* Streams independently from Article */}
<Comments />
</Suspense>
</Layout>
);
}Transmissão do Next.js com loading.tsx
No roteador de aplicações do Next.js, loading.tsx é o conteúdo alternativo de Suspense. A estrutura básica da página (layout) é transmitida primeiro; o conteúdo da página é transmitido quando a função assíncrona é resolvida.
// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
return <ArticleSkeleton />;
}
// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
const posts = await fetchPosts(); // data fetch happens server-side
return <PostList posts={posts} />;
}Componentes de cliente dentro de Suspense
Componentes de servidor usam Suspense para a transmissão de dados. Componentes de cliente usam Suspense para o carregamento tardio. Ambos se beneficiam da hidratação seletiva.
// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));
function Dashboard() {
return (
<Suspense fallback={<ChartSkeleton />}>
<HeavyChart />
</Suspense>
);
}Hidratação baseada em prioridade
Se o usuário interagir com um componente que ainda não foi hidratado (por exemplo, com um clique), o React 18 hidrata esse componente de forma síncrona primeiro, antes de concluir a hidratação de outras partes da página.
onShellReady versus onAllReady
onShellReady é acionado quando a estrutura básica (partes não suspensas) está pronta para transmissão. onAllReady é acionado quando tudo foi renderizado — útil para geração estática ou quando é necessário enviar todo o HTML de uma só vez.
// For streaming (progressive rendering):
onShellReady() { pipe(res); }
// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }Controlador de interrupção
Passe um sinal de AbortController para cancelar a SSR em renderizações lentas (por exemplo, quando o tempo limite é excedido).
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
const { pipe } = renderToPipeableStream(<App />, {
signal: controller.signal,
onShellReady() { pipe(res); },
});
clearTimeout(timeoutId);Medindo o impacto da transmissão
Use o Lighthouse ou o WebPageTest para medir o tempo até o primeiro byte (TTFB) e a maior pintura de conteúdo (LCP) antes e depois de ativar a transmissão, quantificando a melhoria.
Verificação rápida
O que acontece na hidratação seletiva do React 18 quando o usuário clica em um elemento que ainda não foi hidratado?
Recapitulação
A SSR por transmissão usa renderToPipeableStream e limites de Suspense para enviar HTML progressivamente. Cada limite de Suspense é transmitido de forma independente. A hidratação seletiva prioriza os elementos com os quais o usuário interagiu. No Next.js, loading.tsx é o conteúdo alternativo automático de Suspense para a transmissão no nível da página.
Perguntas Frequentes
A aula “Hidratação seletiva e HTML em fluxo” é grátis?
Sim — o texto completo de “Hidratação seletiva e HTML em fluxo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Hidratação seletiva e HTML em fluxo”?
Use limites Suspense para transmitir blocos de HTML e hidratar primeiro as ilhas interativas. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Hidratação seletiva e HTML em fluxo”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Como funciona o SSR do React internamente
- Erros de hidratação: causas e correções
- Hidratação seletiva e HTML em fluxo
- Padrão de arquitetura de ilhas