What is streaming + `Suspense` in the App Router (and `loading.tsx`)?

Deep dive

With React 18, the server can **stream** HTML progressively instead of waiting for the whole page to be ready. `Suspense` boundaries define where the UI can “pause”: Next can send the shell immediately, show a fallback, and then stream in the real content when data resolves.

In the App Router:

• `loading.tsx` defines a built-in Suspense fallback for a route segment.
• You can also create nested boundaries with `<Suspense fallback={...}>`.

Example

// app/dashboard/loading.tsx
export default function Loading() {
  return <div className="skeleton">Loading dashboard…</div>
}

Why it helps

• Better perceived performance (users see something quickly).
• Avoids blocking on the slowest data source.

Common pitfalls

• Waterfalls: awaiting sequentially instead of starting fetches in parallel.
• Too many boundaries causing flicker and a “jumpy” UI.
• Putting client-only logic into server streaming fallbacks.