How Next.js caching works and how to control it

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())
}

Caching bugs usually come down to not knowing which layer is stale. When a Server Action mutation doesn't seem to take effect, ask: did you call revalidatePath or revalidateTag? Is the route marked force-dynamic?