React Server Components: A Deep Dive

The Mental Model Shift

React Server Components represent the biggest change to React's architecture since hooks. The key insight: not every component needs to run in the browser.

What Makes a Server Component?

A Server Component:

Executes entirely on the server
Has zero client-side JavaScript overhead
Can access databases and file systems directly
Cannot use browser APIs or React hooks

The Boundary

Think of your app as having a server boundary:

┌─────────────────────────────────┐
│  Server Components              │
│  - Database queries             │
│  - File system access           │
│  - Synchronous JSX              │
└───────────────┬─────────────────┘
                │ props
                ▼
┌─────────────────────────────────┐
│  Client Components              │
│  - useState, useEffect          │
│  - Event handlers               │
│  - Browser APIs                 │
└─────────────────────────────────┘

Use Cases

Good Server Component:

hljs tsx

[object Object], ,[object Object], ,[object Object],(,[object Object],) {
  ,[object Object], post = ,[object Object], db.,[object Object],.,[object Object],({ slug });
  ,[object Object], ,[object Object],;
}

Must be Client Component:

hljs tsx

[object Object],;
,[object Object], ,[object Object],(,[object Object],) {
  ,[object Object], [liked, setLiked] = ,[object Object],(,[object Object],);
  ,[object Object], ,[object Object],;
}

Performance Impact

Moving a large dependency tree to the server:

Before: 150KB client bundle (marked + date-fns + markdown-it)
After: 3KB client bundle (just rendered HTML)

The dependency still runs. It just runs on the server.

When to Choose What

Factor	Use Server	Use Client
Data fetching	✅	❌
Access secrets	✅	❌
Interactive UI	❌	✅
Browser APIs	❌	✅
Large libraries	✅	❌

The default should be Server. Move to Client only when you need interactivity.