Full Route Cache vs Data Cache and per-fetch cache control

WHAT THIS TESTS: This question tests whether you understand the App Router's caching architecture beyond surface-level definitions. Interviewers want to see that you know there are two distinct caches with different scopes, lifetimes, and invalidation mechanisms, and that you can surgically control data fetching without throwing away the entire route cache.

A GOOD ANSWER COVERS: Four things in order. First, define Full Route Cache as a build-time or revalidated cache of the rendered HTML and React Server Component payload for an entire route segment. Second, define Data Cache as a persistent cache of raw fetch responses that is shared across routes and requests, deduplicated by URL. Third, explain that Full Route Cache depends on Data Cache: if the data cache entries are fresh, the route can be served statically from the Full Route Cache. Fourth, explain that you control a specific fetch by passing options directly to the fetch call, specifically the cache property set to force-cache or no-store, and the next.revalidate property set to a number of seconds or false.

COMMON WRONG ANSWERS: Three red flags stand out. One, conflating the two caches by saying there is just one cache in App Router. Two, suggesting that route segment config like export const dynamic controls a single fetch rather than the entire route's rendering behavior. Three, mentioning useEffect or client-side data fetching as the way to control cache for a Server Component fetch, which reveals confusion about where the fetch runs.

LIKELY FOLLOW-UPS: The interviewer may ask how revalidatePath or revalidateTag invalidates these caches, or how unstable_noStore opts an entire component out of static rendering. They might also ask what happens when you set cache no-store on one fetch but leave another cached in the same component, or how the Data Cache behaves during static generation versus dynamic rendering.

ONE CONCRETE EXAMPLE: Imagine a blog page that fetches a trending posts list and a user-specific avatar. You would write the trending fetch as fetch(url, { cache: force-cache, next: { revalidate: 60 } }) so it populates both Data Cache and Full Route Cache. You would write the avatar fetch as fetch(url, { cache: no-store }) to bypass Data Cache for that request. The route itself might still be statically rendered for the trending section while dynamically streaming the avatar.