React Server Components: The Architecture of 2025

React Server Components (RSC) represent the biggest shift in the React ecosystem since Hooks. They allow you to render components exclusively on the server, reducing the JavaScript bundle sent to the client to zero.

The Problem with Client-Side Rendering (CSR)

In traditional CSR:

1. User downloads a massive JS bundle.
2. Browser parses and executes JS.
3. App fetches data (waterfall).
4. App renders.

The RSC Solution

With RSC:

1. Server fetches data directly (no API latency).
2. Server renders component to a special JSON format.
3. Client streams the result and reconciles it.

When to use Server vs. Client Components?

| Feature | Server Component | Client Component | | :--- | :--- | :--- | | Fetch Data | ✅ (Direct DB access) | ❌ (Via API) | | Access Backend Resources | ✅ | ❌ | | Keep Sensitive Keys | ✅ | ❌ | | Use State/Effects | ❌ | ✅ | | Add Event Listeners | ❌ | ✅ |

Composition Pattern

The "hole" pattern allows you to interleave Server and Client components.

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

export default async function ServerComponent() {
  const data = await db.query();
  
  return (
    <ClientComponent>
      <h1>{data.title}</h1> {/* Passed as children */}
    </ClientComponent>
  );
}

Server Actions

Mutations are now first-class citizens.

// actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  await db.post.create({ data: { title } });
  revalidatePath('/posts');
}

Conclusion

RSC simplifies the mental model of building apps by blurring the line between backend and frontend, giving you the best of both worlds.