# Next.js caching and data fetching
tint: #CBF2CA
blurb: The caching layers, the use cache model, and fetching patterns from 15 to 16.3.

id: a3b1d931-696c-42d7-a4fd-e5c695f4e374
Q: Name the four caching layers of the App Router.
A: Request memoization, the Data Cache, the Full Route Cache, and the client-side Router Cache. id: ea06e171-c0c8-48ab-adc3-c97f335c593b
id: 75a68536-3771-4d73-b0ca-e89856364b2d
Q: What is request memoization?
A: React dedupes identical fetches within a single render pass, so shared components can each fetch what they need. id: a7ef8893-81c9-4394-b0f8-ba63fa142f68
id: 8911096e-ca07-4e65-a1bd-4092c345fe49
Q: What is the Data Cache?
A: A persistent server-side store of fetch results that survives requests and deploys until revalidated. id: 934eae2b-099e-43e8-9c80-aa6d6a393fc2
id: f3abd3d1-ecf6-4e45-b92f-dbf706fd8f3d
Q: What is the Full Route Cache?
A: The prerendered HTML and RSC payload for a static route, held on the server and served without rendering. id: 11212494-5b2d-4da7-aa11-4aa317c298f2
id: b4038afd-81f6-45cc-8ea8-282ef6d733fe
Q: What is the Router Cache?
A: An in-memory client cache of RSC payloads for visited and prefetched routes, so back-navigation is instant. id: c159d16a-2e9c-4514-8050-64653f105394
id: a74f2ab1-ecc8-48c6-9cd6-61ba5de9921b
Q: Is fetch cached by default?
A: No. Since 15 fetch defaults to no-store; you opt in with force-cache, next.revalidate, or use cache. id: 53dcfceb-ffa4-4a8b-a3b9-06299ceddfa6
id: ec79819d-b246-4086-97cf-25d62fd40a33
Q: What does the 'use cache' directive do?
A: Marks a file, component or function as cacheable, so its result is stored and reused rather than recomputed. id: aa451521-2c38-4943-9c6e-dfe9898743fa
id: 1a6614d4-87ec-46f4-a852-630324a10370
Q: What do cacheTag and cacheLife add to 'use cache'?
A: cacheTag labels an entry for targeted invalidation; cacheLife sets how long it stays fresh and stale. id: 19c872cf-615e-45fd-91c9-77ca1299c341
id: e57260da-ab11-4451-953b-9ef6029a328a
Q: What does the cacheComponents flag change?
A: It switches the app to the explicit model: nothing is cached unless you mark it, and dynamic is the default. id: abb3bd9a-58f0-4b11-9999-5ae0bc6c829e
id: 88c80d7d-a4a2-4212-a276-b3b94e3ef469
Q: revalidatePath vs revalidateTag?
A: revalidatePath busts everything for a route; tags bust just the entries you labelled, across every route. id: ab6622d9-23da-4b32-aba1-cb9f101c8893
id: a438927b-7887-4849-bf79-37f5de290fc8
Q: How do you handle on-demand invalidation from a CMS?
A: Expose a route handler, verify the webhook signature, then call revalidateTag for the affected content tags. id: 0e981e8e-bb42-47fd-8e6e-bd01cfc65fbe
id: 6175550c-300f-4db1-814b-615d29e967ca
Q: What is ISR in App Router terms?
A: Time-based revalidation of a prerendered route: serve the cached version, regenerate in the background. id: 650de55e-a972-4985-8584-c925cddc310a
id: 8599cafd-da64-4914-b6c0-dddf95491c2f
Q: What does the segment export revalidate = 60 mean?
A: The route's cached output is considered fresh for 60 seconds, then regenerated on the next request after that. id: c12987b2-3c77-4a1a-b894-38168d644bc2
id: 3c19e744-dfec-4940-9bfb-9ace3f6b8c23
Q: How do you force a route static or dynamic?
A: The segment config dynamic = 'force-static' or 'force-dynamic', overriding what Next.js infers. id: c84268bf-fb1c-42b7-ac12-d69cbee29cb1
id: 76a4e2d2-861d-4917-b332-f5577921d070
Q: What silently makes a route dynamic?
A: Reading cookies, headers, searchParams or connection — any request-time input opts the whole segment out. id: 4c628480-1b00-423a-98e1-1a4db8915386
id: 73ee16e1-dbe1-4ed1-8913-742f3a87ea49
Q: How do you avoid a request waterfall between fetches?
A: Start independent fetches together and await them with Promise.all, rather than awaiting each in sequence. id: d983c381-bcb4-4daf-a4a8-01daee5feddc
id: 7a78bf1f-0688-40fd-b5b0-d2f0f26296b7
Q: What is the preload pattern?
A: Kick off a data fetch in the parent before rendering a child, so the request is already in flight on render. id: 78375417-4401-4937-8de3-5ec09d695ba8
id: 064ab625-4626-4a4a-b774-d9a7af4d7a4d
Q: When do you reach for React's cache() function?
A: To dedupe non-fetch work like a database query across one render pass, since only fetch is memoized natively. id: 8c1ead4c-5307-4b6c-ae6b-d74681da1985
id: 90238ebd-adbd-4df3-9d39-aae8c966d9f5
Q: Where does client-side data fetching still belong?
A: Anything request-specific and interactive — polling, infinite scroll, optimistic UI — via SWR or TanStack Query. id: c5f5d873-da69-429c-87b7-c1db6a691080
id: 96848e64-2f43-43e6-8752-1bc8fa50d65b
Q: How do you cache a Route Handler response?
A: Set Cache-Control headers yourself, or use cache inside it; GET handlers stopped caching by default in 15. id: 4ccfdf9d-4ffb-45a7-afb6-e0e15114f9c1
id: 6be09c41-5230-4b2b-8ea9-1297249abf70
Q: What did 16.3 add to the caching story?
A: 'use cache' gained client-side caching, letting a route serve a prefetched shell before its data arrives. id: c6fc6f69-9293-4bd6-a912-16dad7991ffe
id: f8f4da7d-1e1b-4831-a2b1-e0de7d58f388
Q: What is partial prefetching?
A: Per-link control over how much of a target route to prefetch, instead of all-or-nothing prefetch={true}. id: b4156d56-2bf2-4f36-99b6-a8e86f8fb065
id: 15fc89b1-e9eb-49f0-ba53-211f2f7f4820
Q: How does the CDN relate to these caches?
A: It sits in front of them, caching full responses by URL; a stale CDN entry survives a revalidateTag. id: 85ff2982-2790-4ae7-8fe9-03481770172d
id: 19228615-6979-43dd-a771-f69215893329
Q: Interview one-liner: how would you explain the caching model to a sceptic?
A: It moved from four implicit layers you fought against to one explicit directive you opt into, per unit of work.