Discuss Data Cache caching mechanism?
Next.js has a built-in Data Cache that persists the result of data fetches across incoming server requests and deployments. This is possible because Next.js extends the native fetch API to allow each request on the server to set its own persistent caching semantics.
While both caching mechanisms help improve performance by re-using cached data, the Data Cache is persistent across incoming requests and deployments, whereas memoization only lasts the lifetime of a request.
In the browser, the cache option of fetch indicates how a request will interact with the browser's HTTP cache, in Next.js, the cache option indicates how a server-side request will interact with the server's Data Cache.
- 1
The first time a fetch request with the 'force-cache' option is called during rendering, Next.js checks the Data Cache for a cached response.
- 2
If a cached response is found, it's returned immediately and memoized.
- 3
If a cached response is not found, the request is made to the data source, the result is stored in the Data Cache, and memoized.
- 4
For uncached data (e.g. no cache option defined or using { cache: 'no-store' }), the result is always fetched from the data source, and memoized.
- 5
Whether the data is cached or uncached, the requests are always memoized to avoid making duplicate requests for the same data during a React render pass.
Scenario Questions
0-2 years experience
- 1You need to display a list of blog posts fetched from an external API. How would you use Next.js data‑fetching to cache that data so the page loads quickly for users?
- 2If you add getStaticProps to a page and then deploy a new version of the site, what happens to the previously generated HTML and its cached data?
- 3A teammate asks why the Image component sometimes shows an older version of an image after a recent upload. How does Next.js’s CDN caching affect this?
2-5 years experience
- 1Your product‑detail page uses getServerSideProps and feels slow. How would you investigate whether the data cache is being bypassed or mis‑configured?
- 2Explain the trade‑offs between using ISR versus SWR for a page that shows frequently updated inventory data.
- 3After updating the API response for a featured article, some users still see the old content. What could cause the cache not to invalidate, and how would you fix it?
5-8 years experience
- 1Design a caching strategy for a high‑traffic e‑commerce site built with Next.js that needs both static product pages and real‑time stock levels. Which caching layers would you employ and why?
- 2How would you handle cache invalidation for personalized user data when you’re using edge functions and Vercel’s CDN?
- 3If you want to reduce latency for frequent API calls in a Next.js app, how would you combine SWR, server‑side caching, and edge middleware?
8+ years experience
- 1Your company is migrating several micro‑frontends, each a separate Next.js app, to share a common data cache layer. What architectural considerations and migration steps would you propose to keep cache coherence and avoid stale data across teams?
- 2At large scale, how would you evaluate moving from Vercel’s default CDN cache to a custom edge cache (e.g., Cloudflare Workers) for Next.js data fetching, and what metrics would guide that decision?
- 3Describe how you’d set up a long‑term cache‑purge policy for a globally distributed Next.js platform that serves both public marketing pages and private user dashboards.
Follow-up Questions
- What metrics would you watch to know the cache is working as intended?
- How would you debug a situation where a page is serving stale data?
- Can you describe a scenario where you’d prefer server‑side over static caching?