Why use Link over <a> for internal navigation?

WHAT THIS TESTS: This question probes your mental model of the browser navigation lifecycle and the single-page application architecture. The interviewer wants to know if you understand that a standard anchor tag triggers a full document request, whereas framework Link components are designed to keep the user inside the client-side runtime. It also checks whether you know the practical consequences for performance and state preservation.

A GOOD ANSWER COVERS: First, state that a plain anchor tag causes the browser to unload the current page and request a new HTML document from the server, which destroys in-memory React state and forces the browser to reparse CSS and JavaScript. Second, explain that a Link component intercepts the click event, prevents the default browser navigation, and uses the History API to change the URL without a network roundtrip for the document itself. Third, mention that the router then matches the new path and renders the appropriate component tree, often reusing the existing JavaScript context. Fourth, note that modern implementations can prefetch the target route's code or data; for example, the Next.js docs cover Prefetching and Linking and Navigating as related concerns, so the transition feels instant. Fifth, clarify that accessibility is not sacrificed because the underlying DOM node is still an anchor tag with a valid href.

COMMON WRONG ANSWERS: Saying Link is just a stylistic wrapper or that it exists only to avoid prop drilling. Claiming that Link performs a full page refresh but caches it. Asserting that prefetching happens automatically on every Link without conditions, or confusing client-side routing with server-side rendering. Another red flag is forgetting that the href attribute must still be present for right-click and accessibility behavior.

LIKELY FOLLOW-UPS: The interviewer may ask how prefetching works in Next.js App Router versus Pages Router, or when you would still use a native anchor tag for external domains. They might also ask how the router handles scroll restoration, or what happens to global state like Zustand or Redux during a client-side transition. A senior candidate should also be ready to discuss the trade-offs of prefetching on low-end devices or metered networks.

ONE CONCRETE EXAMPLE: Imagine a dashboard with a sidebar navigation menu. If each item were a standard anchor tag, every click would flash a white screen while the server responds and the browser rebuilds the entire page. Replacing those with Link components means React keeps the sidebar mounted, preserves the open collapse state, and swaps only the main content area. In a Next.js application, the docs list Prefetching and Linking and Navigating alongside the Link Component, which means the framework is designed to fetch the target route's assets or data ahead of time so the subsequent click renders the new view in under one hundred milliseconds instead of waiting for a full document request.