Loading UI and Streaming

The problem: waiting on a blank screen

When a Server Component fetches data, Next.js waits for that data before it sends any HTML. If the data takes two seconds, the visitor stares at a blank screen for two seconds. That feels broken, even though it is working.

The fix is to show something immediately — a "loading…" message or a grey skeleton (a placeholder shaped like the real content) — and swap in the real content the moment it is ready.

Instant loading with a loading.js file

Next.js has a special file for this. Put a file named loading.js next to your page.js, and Next.js shows it automatically while that page is fetching. You write zero wiring code — the file name does the work.

// app/dashboard/loading.js
export default function Loading() {
  return <p>Loading your dashboard…</p>;
}

What "streaming" actually means

Streaming means the server sends the page to the browser in pieces instead of all at once. The fast parts (your header, navigation, anything with no slow data) arrive first and show immediately. The slow parts arrive a moment later and pop into place when ready — the visitor never waits on the whole page just because one part is slow.

Think of a restaurant that brings your drink and bread right away instead of making you wait for everything until the main course is cooked. The slow dish still comes — but you are not staring at an empty table.

Streaming one slow part with Suspense

The loading.js file covers the whole page. But often only one part is slow — say a list of recent sales — while the rest of the page is instant. For that, wrap just the slow component in React Suspense and give it a fallback (what to show while it loads).

// app/dashboard/page.js
import { Suspense } from 'react';

async function RecentSales() {
  const res = await fetch('https://example.com/api/sales'); // slow
  const sales = await res.json();
  return <ul>{sales.map((s) => <li key={s.id}>{s.label}</li>)}</ul>;
}

export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>           {/* shows instantly */}
      <Suspense fallback={<p>Loading sales…</p>}>
        <RecentSales />            {/* streams in when ready */}
      </Suspense>
    </main>
  );
}

How the streaming flow works, step by step

Here is exactly what happens, in order, when a visitor opens the dashboard above:

1. The visitor opens /dashboard. Next.js starts rendering on the server.
2. The fast parts — the <h1>Dashboard</h1> heading — are ready instantly, so Next.js sends them to the browser right away.
3. For the <Suspense> section, the slow RecentSales fetch is not done yet, so Next.js sends the fallback ("Loading sales…") in its place for now.
4. The browser shows the heading and the fallback immediately — no blank screen.
5. On the server, the RecentSales fetch finishes. Next.js streams the finished list to the browser.
6. The browser swaps the "Loading sales…" fallback for the real list. The page is now complete, and only the truly slow part ever waited.