Server Components & Data Fetching

One of Next.js's most powerful features is React Server Components (RSC). Components run on the server by default, reducing the JavaScript sent to the browser and enabling direct data access. This lesson covers server vs client components, the "use client" directive, server actions, fetching data in server components, caching, and revalidation.

---

Server vs Client Components

Feature	Server Component (default)	Client Component ("use client")
Runs on	Server only	Server (SSR) + Browser
JavaScript sent to browser	None	Yes — included in the bundle
Can access DB / file system	Yes	No
Can use hooks (useState, etc.)	No	Yes
Can use event handlers	No	Yes
Can render server components	Yes	No (can accept as children)

When to Use Each

Use Server Components for:                Use Client Components for:
├── Fetching data                          ├── Interactivity (onClick, onChange)
├── Accessing backend resources            ├── useState, useEffect, useReducer
├── Rendering static/dynamic content       ├── Browser APIs (localStorage, etc.)
└── Keeping secrets on the server          └── Third-party client libraries

---