Questions
8 of 8
Discuss <Link> in contest of caching?
Difficulty: 5/10
Link component, prefetch, caching strategy
By default, the <Link> component automatically prefetches routes from the Full Route Cache and adds the React Server Component Payload to the Router Cache.
- 1
To disable prefetching, you can set the prefetch prop to false.
- 2
But this will not skip the cache permanently, the route segment will still be cached client-side when the user visits the route.
Scenario Questions
0-2 years experience
- 1How would you use the Next.js <Link> component so that navigating to another page benefits from caching?
- 2What happens if you set prefetch={false} on a <Link>—how does that change the user experience?
- 3If the target page is server‑side rendered, where does Next.js store the fetched HTML for subsequent navigations?
2-5 years experience
- 1We have a product page that links to related items via <Link>, but users see stale product info after navigation. Walk me through how you'd debug the caching behavior.
- 2Explain the trade‑offs between leaving the default prefetch on for a high‑traffic blog versus manually controlling it.
- 3Why might aggressive prefetching cause unnecessary bandwidth usage, and what steps would you take to mitigate that?
5-8 years experience
- 1Design a caching strategy for dynamic product data when using Next.js <Link> with Incremental Static Regeneration, ensuring data stays fresh without hurting performance.
- 2How would you extend or wrap the <Link> component to apply per‑route cache‑control headers in a large e‑commerce site?
- 3Consider users on slow connections: how would you adjust prefetch and caching settings to improve perceived navigation speed?
8+ years experience
- 1Our monorepo contains several Next.js apps that share a common navigation component. How would you architect a shared caching policy for <Link> across teams, balancing SEO, CDN caching, and developer ergonomics?
- 2If we need to migrate from client‑side navigation to server‑driven streaming, what changes to Link prefetch and caching would you propose, and how would you coordinate the rollout?
- 3Discuss long‑term maintenance of cache‑invalidation rules for pages linked via <Link> when underlying data sources change frequently.
Follow-up Questions
- When would you deliberately disable prefetch on a Link?
- What determines which pages Next.js prefetches automatically?
- How does the browser cache interact with Next.js's built‑in caching for navigated pages?