Data Fetching Patterns — When to Fetch Where

The App Router gives you more places to fetch data than any React framework before it. Server components, route handlers, client-side hooks, middleware — each with different tradeoffs around performance, caching, and user experience.

Choosing wrong doesn't break your app, but it does make it slower, harder to maintain, or both. This lesson maps out when to use each pattern.

The Four Places to Fetch

Server Components    → Default. Fetch during render on the server.
Route Handlers       → API endpoints. For webhooks, external consumers, complex logic.
Client Components    → useEffect/SWR/TanStack Query. For real-time data, user-specific state.
Middleware           → Edge. For auth checks, redirects, A/B tests before rendering.

Pattern 1: Server Components — Your Defaul