Caching Architecture

Priority: P1 (HIGH)

Next.js 4 distinct caching layers. Understanding them prevents stale data bugs.

Workflow: Configure Caching for Feature

1. Choose cache strategy — SSG (force-cache), ISR (revalidate: N), or SSR (no-store).
2. Tag cacheable fetches — Add next: { tags: ['posts'] } to fetch options.
3. Invalidate on mutation — Call revalidateTag('posts') in Server Actions.
4. Deduplicate requests — Wrap shared data fetches with React cache().
5. Clear client cache — Use router.refresh() after client-side mutations.

Cache Invalidation Example

See implementation examples

Implementation Guidelines