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 │ ├...