Topic 23 of 39
Streaming & Suspense
Overview
Streaming allows you to progressively render HTML from the server to the client. By wrapping slow Server Components in React <Suspense>, Next.js instantly sends the fast parts of the page (like layout), and streams the slow parts in when they resolve.
Syntax
tsx
import { Suspense } from 'react';
import { SlowDataComponent, FastDataComponent } from './components';
export default function Page() {
return (
<section>
{/* This renders instantly */}
<h1>Dashboard</h1>
<FastDataComponent />
{/* This shows fallback, then streams in without blocking the page */}
<Suspense fallback={<p>Loading heavy data...</p>}>
<SlowDataComponent />
</Suspense>
</section>
);
}Common Pitfalls
- Not using Suspense around slow DB queries, causing the entire page load (Time To First Byte) to be delayed by the slowest query.
- Wrapping the entire page in one big Suspense boundary instead of granulating it for different components.
Interview Questions
Q:
How does Streaming improve the perceived performance of a web application?
A:
It prevents slow data queries from blocking the entire page render. Users see the layout and fast content immediately, reducing Time To First Byte (TTFB), while slow content streams in later.
Real-World Example
A product dashboard where the main info loads instantly, but the complex analytics graph streams in a few seconds later.
example
tsx
export default function Analytics() {
return (
<div>
<Header />
<Suspense fallback={<GraphSkeleton />}>
<HeavyAnalyticsGraph />
</Suspense>
</div>
)
}Check Your Knowledge
Test your understanding of Streaming & Suspense with these quick questions.