Back

Server vs Client Components

Next.js has two types of components. Server components run on the server and are faster, so use them by default. Client components run in the browser and are needed for interactivity.

```tsx
// Server component (default: no "use client")
async function UserList() {
  const users = await fetch('/api/users').then(r => r.json())
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
}

// Client component (needs "use client" at top)
"use client"
import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

**Rule of thumb:**
- Fetching data → Server component
- useState, onClick, browser APIs → Client component

Roadmap