Streaming SSR
Key idea:
Streaming SSR — sending HTML in chunks as each section of the page becomes ready. Improves TTFB (first bytes in ~100ms instead of ~2s). Built on HTTP chunked transfer-encoding. React: Suspense + renderToPipeableStream. Next.js App Router — streaming by default. User sees
Below: details, example, related terms, FAQ.
Details
- Transfer-Encoding: chunked — HTTP-level mechanism
- Suspense boundaries split the page into independent chunks
- Fallback UI shows while a slow section loads
- Out-of-order streaming: fast chunks first, slow ones wait
- Incompatible with traditional full-page caching — need per-chunk cache
Example
// Next.js loading.tsx
export default function Loading() {
return <Skeleton />;
}
// Or explicit Suspense
<Suspense fallback={<Skeleton />}>
<SlowProductList />
</Suspense>Related Terms
Learn more
Frequently Asked Questions
Streaming vs full SSR?
Full SSR: wait for entire page → send. Streaming: send as each part is ready. Streaming TTFB is 5-10x faster for pages with slow data fetches.
SEO impact?
Googlebot supports chunked streaming. Other crawlers may hit a timeout. For bots: consider a fallback non-streaming route.
Edge CDN support?
Vercel, Cloudflare, Netlify — all support edge streaming. Static pages stay cached, dynamic ones stream.