Streaming & Suspense

~22 min · streaming, Suspense, loading

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Why streaming exists

Without streaming, the server has to wait for every piece of data before sending the first byte of HTML. With streaming, the framework sends the shell + cheap parts immediately, and streams the slower parts as their data resolves.

The two ways to stream

Approach	Granularity
`loading.tsx`	Whole route segment — framework wraps it in Suspense for you
`<Suspense fallback>`	Per component — you choose what streams independently

How it feels to the user

The page header and navigation appear instantly; the slow chart shows its skeleton; when the chart's data arrives, the skeleton swaps for the real content — without re-rendering the page above.

Code

Whole-segment streaming·tsx

// app/dashboard/loading.tsx — shown instantly
export default function Loading() {
  return <DashboardSkeleton />;
}

// app/dashboard/page.tsx — streams when its data arrives
export default async function Dashboard() {
  const data = await fetchSlow();
  return <DashboardContent data={data} />;
}

Granular Suspense islands·tsx

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div className="space-y-6">
      <h1>Dashboard</h1>
      <Suspense fallback={<StatsSkeleton />}>
        <Stats />
      </Suspense>
      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart />
      </Suspense>
      <Suspense fallback={<TableSkeleton />}>
        <RecentOrders />
      </Suspense>
    </div>
  );
}

External links

Streaming with Suspense

Exercise

Take a slow data-heavy page and split it into three Suspense boundaries. Capture before/after timings: how fast does the user see the first paint?