SSR Streaming + Suspense
O servidor envia HTML em chunks — partes prontas chegam imediatamente enquanto as lentas mostram skeleton.
Definição
SSR Streaming envia o HTML em pedaços via Transfer-Encoding: chunked. Cada Suspense boundary vira um chunk independente. O navegador renderiza progressivamente. Combinado com Selective Hydration, melhora drasticamente TTFB e FCP.
Problema → Solução
Problema
SSR tradicional segura o HTML inteiro até todos os dados estarem prontos — TTFB alto.Solução
Streaming: cada Suspense boundary vira um chunk independente enviado conforme fica pronto.Dica de entrevista
Tip
No Next.js App Router, async Server Components + Suspense ativam streaming automaticamente.Código
export default function Page() {
return (
<main>
<Header />
<Suspense fallback={<FeedSkeleton />}>
<Feed />
</Suspense>
<Suspense fallback={<RecomendSkeleton />}>
<Recomendacoes />
</Suspense>
</main>
);
}
async function Feed() {
const posts = await db.getPosts();
return posts.map(p => <Post key={p.id} post={p} />);
}Perguntas de entrevista
Q.Como streaming melhora Web Vitals?▾
A.Reduz TTFB (server pode começar a responder antes de todos os dados). Reduz FCP (browser pinta a primeira parte rapidamente). Não afeta LCP diretamente, mas melhora a percepção de carregamento.
Q.O que é Selective Hydration?▾
A.Hidratação seletiva: o React 18 hidrata partes da página independentemente, conforme cada chunk chega. Permite o usuário interagir com a parte de cima enquanto o resto ainda hidrata.
Q.Streaming funciona em todos os hosts?▾
A.Precisa de runtime que suporte HTTP streaming. Vercel, Cloudflare, Netlify suportam. Alguns CDNs/proxies fazem buffering e quebram o streaming — verifique a documentação do seu host.
Termos relacionados
10/122← →