React Server Components: What They Actually Change

React Server Components (RSCs) are the most significant change to React’s architecture since hooks. But the discourse around them has been confusing.

Let’s cut through the noise.

What RSCs Actually Are

Server Components are React components that execute only on the server. They never ship JavaScript to the browser. They can directly access databases, file systems, and APIs - no intermediate API layer needed.

// This component runs on the server only
async function BlogPosts() {
  const posts = await db.posts.findMany();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

No useEffect. No useState. No client-side fetch. Just a component that gets data and returns JSX.

RSCs vs SSR: They’re Different

Server-Side Rendering renders your components on the server, then re-hydrates them on the client. The full component code ships to the browser.

Server Components render on the server and stay on the server. Only the rendered output (as a serialized tree) is sent to the client. The component code never reaches the browser.

Feature	SSR	RSC
Runs on server	Yes	Yes
Hydrates on client	Yes	No
Ships JS to browser	Yes	No
Can use hooks	Yes	No
Can access DB directly	No	Yes

The Real Benefit: Reduced Bundle Size

Every library you use in a Server Component has zero impact on bundle size. You can import a 500KB Markdown parser, use it in a Server Component, and your client bundle doesn’t grow by a single byte.

This changes how you think about dependencies. Heavy libraries are free on the server.

The Mental Model

Think of your app as two layers:

1. Server layer - data fetching, heavy computation, static rendering
2. Client layer - interactivity, state, event handlers

Components in the server layer are Server Components. Components that need interactivity are Client Components (marked with 'use client').

The boundary between them is explicit. That’s a feature, not a bug.

When to Use Client Components

Add 'use client' only when you need:

• useState or useReducer
• useEffect
• Browser-only APIs
• Event handlers (onClick, onChange, etc.)
• React context

Everything else should be a Server Component by default.

The Practical Impact

For a typical blog or content site, RSCs mean:

• Near-zero client JavaScript for content pages
• No API routes for data that’s only displayed
• Faster page loads since less JS needs to parse and execute

For highly interactive apps, RSCs reduce bundle size for the parts that don’t need interactivity (layouts, navigation, data-display components).

The architecture is sound. The developer experience is catching up.