React Server Components vs. Client Components

The Paradigm Shift

React introduced Server Components (RSC) to solve a fundamental problem: not everything needs to be interactive.

Traditionally, React apps were Client-Side Rendered (CSR). The browser downloaded a large JS bundle, executed it, fetched data, and then rendered the UI. This led to waterfalls and slow initial loads.

Server Components allow components to render exclusively on the server. Their code is never sent to the client.

Key Differences

Feature	Server Component	Client Component
Rendering	Server-side only	Client-side (mostly)
Bundle Size	Zero impact	Adds to JS bundle
Data Access	Direct DB/File access	Via API/Effects
Interactivity	No (onClick, useState)	Yes

When to Use What?

Use Server Components For:

• Data Fetching: Querying databases directly.
• Backend Logic: Accessing file systems or internal services.
• Static Content: Large text blocks, headers, footers.
• Sensitive Info: Helper functions with API keys.

// ServerComponent.tsx
import db from './db';

async function UserList() {
  const users = await db.query('SELECT * FROM users'); // Direct DB access!
  return (
    <ul>
      {users.map(user => <li>{user.name}</li>)}
    </ul>
  );
}

Use Client Components For:

• Interactivity: onClick, onChange listeners.
• State: useState, useReducer.
• Effects: useEffect, useLayoutEffect.
• Browser APIs: localStorage, window, etc.

'use client'; // Directive required

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

The Mental Model

Think of Server Components as the “skeleton” or “frame” of your application. They fetch the data and lay out the structure. Client Components are the “interactive islands” embedded within that static frame.

This hybrid model allows us to have the performance of a static site (HTML sent from server) with the rich interactivity of an SPA, without the massive JS payload.