The Shift to Server Components

React Server Components (RSC) represent one of the biggest shifts in the React ecosystem since hooks were introduced. But what exactly are they, and why should you care?

What are Server Components?

Traditionally, React components ran on the client (the browser). You'd send a large JavaScript bundle to the user, which would then hydrate and become interactive.

Server Components, on the other hand, render exclusively on the server. They never ship their JavaScript code to the client.

// This component runs ONLY on the server
import db from './database';
 
async function UserProfile({ userId }) {
  const user = await db.user.findUnique({ id: userId });
  
  return (
    <div className="p-4 shadow-lg rounded-xl bg-card">
      <h1 className="text-2xl font-bold">{user.name}</h1>
      <p className="text-muted-foreground">{user.bio}</p>
    </div>
  );
}

Default Performance

Because RSCs don't send their code to the client, your bundle size decreases significantly.

Key Benefits

1. Zero Bundle Size: Large dependencies (like a markdown parser or date formatter) used in RSCs don't affect your TTI (Time to Interactive).
2. Direct Backend Access: Query your database directly in your component. No more useEffect + fetch waterfalls.
3. Automatic Code Splitting: Client components imported into Server Components are automatically code-split.

When to Use Client Components?

You still need Client Components ("use client") for interactivity:

• onClick, onChange listeners
• useState, useEffect hooks
• Browser-only APIs (window, localStorage)

'use client';
 
import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
  
  return (
    <button onClick={() => setLikes(app => app + 1)}>
      Likes: {likes}
    </button>
  );
}

The Mental Model

Think of Server Components as the "skeleton" or "frame" of your page, fetching data and laying out structure. Client Components are the "islands of interactivity" sprinkled within.

Composition is Key

You can pass Server Components as children to Client Components to prevent them from becoming Client Components themselves.

// Client Component
'use client';
export default function Collapsible({ children }) {
  const [open, setOpen] = useState(false);
  return (
    <div>
       <button onClick={() => setOpen(!open)}>Toggle</button>
       {open && children} {/* children can be Server Components! */}
    </div>
  )
}

This pattern allows you to keep the bulk of your tree on the server while maintaining rich interactivity where needed.