Understanding React Server Components

React Server Components (RSC) represent the biggest shift in the React ecosystem since Hooks. They allow us to render components on the server, reducing the JavaScript bundle sent to the client. But understanding when to use them versus Client Components can be tricky.

The Mental Model

Think of your application tree as a mix of server and client parts. The "Server" is where you have direct access to your backend—databases, file systems, internal APIs. "Client" is the browser, where you handle interactivity. RSCs let you keep the logic that needs backend access on the server, sending only the computed HTML (and some serialized data) to the client.

When to use what?

Here is a simple heuristic:

• Server Components: Fetching data, accessing backend resources, keeping sensitive keys on the server, reducing client-side bundle size.
• Client Components: Interactivity (onClick, onChange), using Hooks (useState, useEffect), using browser-only APIs.

Performance Implications

By moving heavy dependencies (like a markdown parser or a date formatting library) to the server, you reduce the amount of JavaScript the user's browser needs to download, parse, and execute. This leads to faster hydration and a more responsive application, especially on low-end devices.