Streaming with Suspense boundaries
Explore how React Suspense boundaries enable streaming with Next.js to deliver UI in chunks as data loads, reducing wait times. Learn to implement loading states with loading.js and granular controls with Suspense for smoother, faster user experiences in full stack apps.
In the previous lesson, we explored how React Server Components (RSCs) let us fetch data and render on the server. But what happens when one part of the page is slow to load its data?
Imagine a dashboard that has three widgets:
User profile (
<UserProfile/>). It fetches data in 50ms.Analytics charts (
<Analytics/>). It fetches data in 200ms.Activity feed (
<ActivityFeed/>). This is the slow one. It takes a full two seconds (2000ms) to fetch all its data.
Without streaming, the entire page waits for the slowest component. The user sees a blank screen for two full seconds, even though most of the page is ready. That’s the kind of experience we want to avoid.
The question is: can we send the UI that’s ready first while we wait for the rest? With the Next.js App Router and React Suspense, that’s exactly what happens.
What is streaming?
Streaming is the process of breaking down a page into smaller chunks and progressively sending them from the server to the client as they become ready. It’s a core feature supported by the RSC architecture.
Instead of a two-second wait for the full page, the flow looks like this:
Send the page shell: The server instantly sends the static parts of the layout (like the navigation bar and footer) and a placeholder for the slow content. The user sees something right away. ...