Streaming

1
import { Suspense } from 'react';
2

3
export default function Page() {
4
  return (
5
    <div>
6
      {/* Shell renders immediately */}
7
      <h1>Dashboard</h1>
8
      {/* Each Suspense boundary streams independently */}
9
      // !mark
10
      <Suspense fallback={<FastSkeleton />}>
11
        <FastComponent />
12
      </Suspense>
13
      // !mark
14
      <Suspense fallback={<SlowSkeleton />}>
15
        <SlowComponent />
16
      </Suspense>
17
    </div>
18
  );
19
}
20

21
async function SlowComponent() {
22
  const data = await fetchSlowData(); // 3 seconds
23
  return <div>{data}</div>;
24
}

Demo

1. Watch the timeline: See how components stream in at different times.
2. Parallel loading: Notice all components start loading simultaneously, not sequentially.
3. Skeleton matching: Each skeleton matches the shape of its content.
4. Nested streaming: Inner Suspense boundaries show progressive depth loading.
5. Refresh the page: Reset to see the streaming behavior again.

Best Practices

• Match skeletons to content: Prevent layout shift by matching dimensions
• Strategic boundaries: Place Suspense around slow data, not fast data
• Avoid waterfalls: Fetch data in parallel, not sequentially
• Use loading.tsx: For route-level loading states

Visual Summary

Key Takeaways

Pitfalls & Tips

• Avoid nesting slow components without boundaries.
• Keep skeletons visually consistent with real content.

Links

• Streaming Docs
• Suspense
• Loading UI