When a page has one slow data fetch, a traditional server render blocks the whole page on it. Streaming breaks that dependency: the fast parts render first, and slow sections fill in as their data arrives.
Next.js App Router streams by default when pages are dynamic. Suspense boundaries let you control which parts stream and when.
How Suspense works
Wrap a slow component in <Suspense> with a fallback. The page renders instantly, the fallback shows, and the real content swaps in when ready.
- Instant first paint and faster time-to-interactive.
- Slow sections no longer block critical content.
- Search engines index the fully streamed HTML.
Streaming is not only about speed — it is about showing the most important content first, which also improves SEO signals like LCP.
Where it helps most
Use it for slow databases, external APIs, heavy computations, or third-party embeds. Keep your hero, nav and primary content outside the slow boundary.
The trade-off
Streamed pages are dynamic, so they cannot be statically cached the same way. For public content that changes rarely, prefer ISR; use streaming for the personalized or slow parts.
import { Suspense } from 'react'
export default function ArticlePage() {
return (
<main>
{/* This renders immediately */}
<ArticleHeader />
{/* This streams in when the slow fetch resolves */}
<Suspense fallback={<CommentsSkeleton />}>
<Comments />
</Suspense>
</main>
)
}Streaming FAQ
Does streaming hurt SEO?
No. Search engines receive the complete HTML once streaming finishes, and the faster LCP helps your Core Web Vitals signals.
When should I not stream?
When a page is fully static and cacheable, ISR is better. Streaming is for dynamic content that must be fresh on every request.
