This week in caching: configuring ISR and the fetch cache in Next.js

This week in caching: configuring ISR and the fetch cache in Next.js

A setup checklist for the App Router caching layers. Gold if 'why is my page stale' is your daily question.

— Know the four caches — Request Memoization, Data Cache, Full Route Cache, Router Cache each have different lifetimes; debugging blind wastes hours.
— Set revalidate intentionally — export const revalidate = 60 for time-based ISR, or cache: 'force-cache' per fetch; the default changed between versions, so be explicit.
— Use tags for on-demand purge — fetch(url, { next: { tags: ['posts'] }}) then revalidateTag('posts') on publish beats waiting for a timer.
— Opt out where needed — cache: 'no-store' or dynamic = 'force-dynamic' for truly per-request data.
— Verify the x-nextjs-cache header — HIT/STALE/MISS tells you which layer answered.

Credit to the Next.js caching docs team for the four-cache mental model.

Bookmark: the official 'Caching in Next.js' guide — re-read it after every major version.