server-components

# React Server Components in Next.js

## Overview

React Server Components (RSC) allow components to render on the server, reducing client-side JavaScript and enabling direct data access. In Next.js App Router, all components are Server Components by default.

## Server vs Client Components

### Server Components (Default)

Server Components run only on the server:

```tsx
// app/users/page.tsx (Server Component - default)
async function UsersPage() {
  const users = await db.user.findMany() // Direct DB access

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}
```

**Benefits:**
- Direct database/filesystem access
- Keep sensitive data on server (API keys, tokens)
- Reduce client bundle size
- Automatic code splitting

### Client Components

Add `'use client'` directive for interactivity:

```tsx
// components/counter.tsx
'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}
```

**Use Client Components for:**
- `useState`, `useEffect`, `useReducer`
- Event handlers (`onClick`, `onChange`)
- Browser APIs (`window`, `document`)
- Custom hooks with state

## The Mental Model

Think of the component tree as having a "client boundary":

```
Server Component (page.tsx)
├── Server Component (header.tsx)
├── Client Component ('use client') ← boundary
│   ├── Client Component (child)
│   └── Client Component (child)
└── Server Component (footer.tsx)
```

**Key rules:**
1. Server Components can import Client Components
2. Client Components cannot import Server Components
3. You can pass Server Components as `children` to Client Components

## Composition Patterns

### Pattern 1: Server Data → Client Interactivity

Fetch data in Server Component, pass to Client:

```tsx
// app/products/page.tsx (Server)
import { ProductList } from './product-list'