Skip to main content

App Router Mastery

Streaming and Suspense

0:00
LearnStep 1/4

How Streaming Works

Streaming: Progressive Page Rendering

Streaming allows you to progressively render UI from the server. Instead of waiting for all data to load, you can show parts of the page immediately.

Traditional SSR vs Streaming

Traditional SSRStreaming SSR
Fetch ALL dataStart rendering immediately
Render entire pageStream HTML chunks as ready
Send complete HTMLProgressively hydrate
User sees blank → full pageUser sees shell → content fills in

The Streaming Flow

Automatic Streaming with loading.tsx

tsx
How it works: Next.js automatically wraps your page in a Suspense boundary with loading.tsx as the fallback.

What loading.tsx Becomes

tsx