Suspense Streaming

Progressive HTML streaming with Suspense boundaries. Content appears as it loads, not all at once.

How It Works

Initial HTML shell streams immediately
Suspense fallback shows while async data loads
Content streams in progressively as promises resolve
Hydration script loads at the end

Tip: Open DevTools Network tab and watch the HTML stream arrive in chunks. The page shell appears first, then each Suspense boundary resolves and streams in its content.

Fast Data (500ms)

✅ Data loaded after 500ms

This content streamed in after the initial HTML shell

⏳ Loading...

This fallback shows while data is being fetched

Medium Data (1500ms)

✅ Data loaded after 1500ms

This content streamed in after the initial HTML shell

⏳ Loading...

This fallback shows while data is being fetched

Slow Data (3000ms)

✅ Data loaded after 3000ms

This content streamed in after the initial HTML shell

⏳ Loading...

This fallback shows while data is being fetched

Benefits

Faster perceived performance - users see content as it loads
Better UX - loading states show progress, not blank screens
Efficient - only stream what's ready, don't wait for everything
Works with React Server Components - async components suspend naturally