Data Fetching (Next.js)

Canonical patterns for fetching data in Next.js App Router.

Fetch Strategy Decision

Need data for a page / route?
├─ Data is public / user-agnostic?
│   ├─ Static (rarely changes) → Server Component + fetch() with { cache: 'force-cache' }
│   ├─ Dynamic (per-request)   → Server Component + fetch() (default dynamic)
│   └─ Revalidating            → Server Component + fetch() with { next: { revalidate: N } }
├─ Data is user-specific?
│   └─ Server Component + cookies()/headers() (auto-deduped, secure)
├─ Need real-time / polling?
│   └─ Client Component + React Query / SWR
└─ Need user-initiated mutation?
    └─ Server Action (form action / event handler)