Instant Navigation: Zero-Config Streaming and Suspense in Next.js

The End of White Screens

Users hate waiting for full page reloads. With traditional server-side rendering (SSR), if one slow query takes 800ms, the entire browser page waits.

Enter App Router Streaming

Next.js App Router integrates React Suspense at the route layout level:

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

When a user navigates to `/dashboard`: 1. The shared `layout.tsx` remains mounted. 2. Next.js instantly swaps the page content with `loading.tsx`. 3. The server asynchronously executes `page.tsx`. 4. As HTML chunks become available, they are streamed down the wire and hydrated instantly.

No client-side state machines required!