React Server Components (RSC) represent one of the biggest shifts in the React ecosystem since hooks. They allow us to write components that run exclusively on the server, reducing the amount of JavaScript sent to the client.
The Problem with Traditional SSR
In traditional Server-Side Rendering (SSR) with frameworks like Next.js (Pages Router), the server renders the HTML, but keeps the hydration cost. The entire component tree is still sent to the client as JavaScript bundles to "hydrate" the page.
This often leads to:
- Large bundle sizes.
- Delayed Time-to-Interactive (TTI).
- Redundant data fetching logic on the client.
Enter Server Components
Server Components never hydrate on the client. Their code is never sent to the browser. This means:
- Zero Bundle Size: Large dependencies used in RSCs don't add to your bundle.
- Direct Backend Access: You can query databases directly inside your component.
- Automatic Code Splitting: Client components imported by Server Components are automatically code-split.
When to use Client Components?
You still need Client Components ("use client") for:
- Interactivity (onClick, onChange).
- State (useState, useReducer).
- Effects (useEffect).
- Browser APIs (localStorage, window).
Conclusion
RSC is not about replacing Client Components; it's about separating concerns. Use Server Components for data fetching and static content, and Client Components for the interactive "leaves" of your application tree.