Navigation and Loading

Navigation, Streaming, and Loading UI

Routing with the App Router built a routing table out of folders. This section is about the gap between two of those routes: the click, the wait, and the failure. In the App Router that gap is not a page load. The browser keeps its JavaScript heap, its scroll position and every layout the two routes share, and the server returns a description of the tree rather than a document.

Three mechanisms cooperate. Prefetching starts the work while the link is merely visible. Streaming lets the server answer in pieces, so a skeleton paints while a slow query still runs. Client-side transitions splice the answer into the page already on screen.

Every timing, chunk size and request log below comes from a small production build served by next start on port 3311, most of them read out of Chrome 1 through Playwright 26,280 . Its slow routes carry export const dynamic = 'force-dynamic'; without that Next.js 10,514 would prerender them and there would be nothing to stream.

Subsections