What is the difference between client-side navigation and full page reload in Next.js?

Next.js handles navigation differently depending on how it's initiated: Client-side navigation (Link component / router.push): import Link from "next/link"; <Link href="/about">About</Link>. Uses JavaScript to swap out only the changed parts of the page — no full browser reload. The URL changes, only the new page's JavaScript is fetched (code splitting), layouts that are shared are NOT re-rendered (state preserved). React handles the DOM update. Faster, smoother user experience. In App Router: only the changed route segments are re-rendered; shared layouts maintain their state. Full page reload (browser navigation, window.location): browser fetches the entire HTML from the server — all React state is lost, full re-initialization occurs. Much slower. Only appropriate for: logging out (clearing all state), critical security redirects. Prefetching: <Link> automatically prefetches the linked page when it enters the viewport (in production). By the time the user clicks, the JavaScript bundle and data are already loaded — instant navigation. Disable: <Link prefetch={false}>. Programmatic navigation: import { useRouter } from "next/navigation"; // App Router const router = useRouter(); router.push("/about"); router.replace("/login"); router.back(); router.refresh(); // re-renders current route, revalidating Server Components. router.refresh(): unique to App Router — re-renders Server Components with fresh data without a full page reload or losing client state.