Complete Guide to React Server Components

## What are React Server Components?

React Server Components (RSC) represent a paradigm shift in how we build React applications. Traditionally, components always rendered on the client side (or were SSR'd but still required JS to hydrate). RSCs allow you to render components strictly on the server, sending zero client-side JavaScript.

### Key Benefits

1. **Zero Bundle Size Impact**: Because Server Components never ship to the client, you can use massive libraries (like a markdown parser or date formatter) without increasing your final bundle size.
2. **Direct Backend Access**: You can access databases, read files, and call internal APIs directly from your components without creating intermediate API endpoints.
3. **Automatic Code Splitting**: Client components imported by server components are automatically code-split.

### When to use Client vs. Server Components

* **Server Components (`use server`)**: Use for fetching data, accessing backend resources, and keeping sensitive information (like API keys) on the server.
* **Client Components (`use client`)**: Use for interactivity (state, effects, event listeners) and using browser APIs.

### Embracing the New Paradigm

Frameworks like Next.js 13+ with the App Router have made RSCs the default. While the learning curve can be steep, the performance benefits make it a worthwhile investment for any modern React application.