How Next.js caching works and how to control it
Request Memoization, Data Cache, Full Route Cache, Router Cache, revalidate, cache tags, unstable_noStore, force-dynamic, caching layers overview
The Four Caching Layers
Next.js has four distinct caches. Understanding them prevents subtle bugs where you expect fresh data but get stale data.
Request Memoization — deduplicates identical fetch calls within a single server render. Automatic, per-request, cleared after rendering.
Data Cache — persists fetch results across requests and deployments. Controlled by cache and next.revalidate options on fetch.
Full Route Cache — stores rendered HTML and RSC payloads on the server. Routes are cached at build time if they're static.
Router Cache — client-side cache of visited routes for instant back-navigation.
// Opt an entire route into dynamic (no Full Route Cache)
export const dynamic = 'force-dynamic'
// Revalidate a route every 3600 seconds
export const revalidate = 3600
// Opt a single fetch out of Data Cache
import { unstable_noStore as noStore } from 'next/cache'
export async function getData() {
noStore()
return fetch('/api/data').then(r => r.json())
}Most caching bugs come from not knowing which layer is stale. If a Server Action mutation doesn't seem to take effect, check: did you call revalidatePath or revalidateTag? Is the route marked force-dynamic?
