Client-Side Navigation in Next.js: What Happens on a Link Click

Next.js client-side navigation is what happens when a reader clicks a Link in the App Router: the URL changes and the new content appears, but the browser never performs a full page reload. Next.js intercepts the click, fetches only what changed, and updates the page in place.

This differs from a plain HTML link. A native anchor tag always triggers a full page navigation, which reloads every script and resets any client state on the page. Next.js Link avoids that by handling the transition itself.

App.tsx

// app/page.tsx
import Link from "next/link";
 
export default function HomePage() {
  return <Link href="/dashboard">Go to dashboard</Link>;
}

Click this link and the browser's address bar updates to /dashboard immediately, while the page content swaps in without a visible white flash or a fresh document load. That swap is the visible result of a client-side transition.

The steps between click and content

Several things happen in order once the click is intercepted, and understanding them explains why some navigations feel instant while others show a brief loading state.

The client first checks its in-memory cache for the route. A route that Link already prefetched is served straight from that cache, which is why prefetched links feel instant. A route that was not prefetched triggers a request for the missing piece at click time instead.

The RSC payload, not a full page

What comes back from the server is a React Server Components payload, a compact serialized description of the new content, not a full HTML document like the browser loads on the very first visit to a site.

React uses that payload to reconcile the component tree on the client and patch only the DOM nodes that actually changed. Nothing outside the updated area re-renders, which is why a layout with a sidebar keeps its scroll position and open state across the click.

When a route streams instead of arriving all at once

A dynamic route wrapped in a loading boundary can stream its slower parts in after the shell appears, instead of making the whole navigation wait on the slowest piece of data.

App.tsx

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

The reader sees this loading state the instant the shell is ready, and the real content replaces it as the server finishes streaming the rest of the payload. This is the same streaming mechanism used across the App Router, not something specific to navigation.

To see the full list of props Link exposes for controlling this behavior, including turning prefetching off, read The Link Component: Props and Behavior Explained. For showing a pending indicator on the link itself while a navigation is in flight, see useLinkStatus: Showing Pending State During Navigation.