What is the difference between client-side navigation and full page reload in Next.js?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for Next.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
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.
Pro Tip
Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a Next.js codebase.