nextjs-data-fetching

## Quick Reference

| Pattern | Code | Purpose |
|---------|------|---------|
| Server fetch | `await fetch(url)` | Cached by default |
| No cache | `{ cache: 'no-store' }` | Always fresh |
| Revalidate | `{ next: { revalidate: 60 } }` | Time-based refresh |
| Tags | `{ next: { tags: ['posts'] } }` | Tag-based invalidation |

| Config | Value | Effect |
|--------|-------|--------|
| `dynamic` | `'force-dynamic'` | Always SSR |
| `revalidate` | `60` | ISR every 60s |
| `fetchCache` | `'force-no-store'` | No caching |

| Client Library | Hook | Use Case |
|----------------|------|----------|
| SWR | `useSWR(key, fetcher)` | Simple client fetching |
| TanStack Query | `useQuery({ queryKey, queryFn })` | Complex state/mutations |

## When to Use This Skill

Use for **data loading patterns**:
- Fetching data in Server Components
- Setting up parallel data fetching with Promise.all
- Implementing streaming with Suspense boundaries
- Creating API routes with Route Handlers
- Client-side data fetching and mutations

**Related skills:**
- For caching strategies: see `nextjs-caching`
- For Server Actions (mutations): see `nextjs-server-actions`
- For App Router basics: see `nextjs-app-router`

---

# Next.js Data Fetching

## Server Components Data Fetching

### Basic Data Fetching

```tsx
// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <ul>
      {posts.map((post: Post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```

### Direct Database Access

```tsx
// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  // Direct database query - no API needed
  const users = await db.users.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  });

  return (
    <ul>