Questions
5 of 8
Discuss Full Route Cache?
Difficulty: 8/10
Static vs Dynamic Rendering, Incremental Static Regeneration, Cache Invalidation
Next.js automatically renders and caches routes at build time. This is an optimization that allows you to serve the cached route instead of rendering on the server for every request, resulting in faster page loads.The default behavior of Next.js is to cache the rendered result (React Server Component Payload and HTML) of a route on the server. This applies to statically rendered routes at build time, or during revalidation.
Scenario Questions
0-2 years experience
- 1We just deployed a blog site using Next.js. When we publish a new post in our CMS, it doesn't show up on the homepage unless we trigger a new production build. How would you configure the homepage route so it automatically updates when new content is published without rebuilding the whole app?
- 2Imagine you have a page showing the current time. During local development, the time updates on every refresh, but after deploying to production, the time is frozen to the exact minute the site was built. What is happening here, and how do we fix it?
2-5 years experience
- 1We have a product detail page that fetches pricing data. We want to cache the page HTML to keep load times under 100ms, but we also need to update the price immediately when an admin changes it in the backend. How would you implement this using Next.js caching APIs, and how do you handle the cache invalidation?
- 2A developer on your team added a cookies() check inside a deeply nested layout component to show a personalized greeting. Suddenly, the entire page stopped being cached statically and database load spiked. Why did this happen, and how would you refactor this to keep the rest of the page statically cached?
5-8 years experience
- 1We are building a multi-tenant SaaS dashboard where each tenant has their own custom domain. We want to leverage the Full Route Cache for the dashboard shell and static widgets, but load tenant-specific data dynamically. How would you design the component architecture and caching boundaries to prevent cross-tenant data leakage while maximizing cache hits?
- 2Our Next.js application has over 50,000 static product pages using ISR. During peak traffic, when we trigger a bulk revalidation of 5,000 pages via revalidateTag, our database CPU spikes to 100% due to concurrent regeneration requests. How would you mitigate this cache stampede problem at the Next.js or infrastructure level?
8+ years experience
- 1We are migrating a massive legacy e-commerce platform to Next.js App Router. The platform relies on a distributed, multi-region setup. How would you design the caching architecture to ensure that Full Route Cache invalidations (e.g., price drops) are propagated globally across all edge nodes consistently, without causing cascading failures on our legacy backend APIs?
- 2As an architect, how would you design a CI/CD linting or testing pipeline to programmatically detect and block pull requests where a developer has accidentally opted a high-traffic, static route into dynamic rendering, or worse, exposed sensitive user data via an improperly configured static route cache?
Follow-up Questions
- How does the Full Route Cache interact with the client-side Router Cache during a user session?
- If a page uses a fetch request with revalidate: 0, what happens to the Full Route Cache for that route?
- How do you programmatically inspect whether a route was statically generated or dynamically rendered in your build output?