How does streaming work in Next.js? | Next.js Interview Questions

What You'll Learn

Streaming concept
Suspense for streaming
loading.tsx

How Streaming Works

code.jsJavaScript

Traditional:  [──────────────────] → [Render All]
Streaming:    [Header] → [Nav] → [Content] → [Footer]

Suspense Streaming

code.txtTSX

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* Streams immediately */}
      <Suspense fallback={<p>Loading stats...</p>}>
        <SlowStats />
      </Suspense>

      {/* Streams when ready */}
      <Suspense fallback={<p>Loading chart...</p>}>
        <SlowChart />
      </Suspense>
    </div>
  );
}

async function SlowStats() {
  const stats = await fetchStats(); // 2 second delay
  return <div>{stats}</div>;
}

loading.tsx Streaming

code.txtTSX

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

// Equivalent to:
<Suspense fallback={<DashboardSkeleton />}>
  <DashboardPage />
</Suspense>

Benefits

TTFB: Server sends response immediately
FCP: Users see content faster
TTI: Page becomes interactive progressively