React Server Components Architecture

React Server Components Architecture

React Server Components (RSC) represent a fundamental architectural evolution in building full-stack user interfaces. RSC allows React components to execute exclusively on the server before sending serialized UI instructions to the browser.

The Problem RSC Solves

In standard client-side React:

1. Large dependencies (like marked, sanitize-html, or date-fns) must be sent to the user's browser, increasing JavaScript bundle size.
2. Data fetching causes waterfalls: Component A fetches data -> renders Component B -> Component B fetches data -> renders Component C.

With React Server Components:

• Server Component code and heavy libraries never ship to the browser.
• Server Components can be async functions that fetch data directly from databases, caches, or internal APIs with zero network latency.

Async Server Component Example

// app/users/page.tsx - React Server Component by default
import db from '@/lib/db';

export default async function UsersPage() {
  // Direct database access! No client bundle footprint.
  const users = await db.user.findMany({ take: 10 });

  return (
    <div className="p-6">
      <h1 className="text-xl font-bold">Registered Users</h1>
      <ul className="mt-4 space-y-2">
        {users.map((user) => (
          <li key={user.id} className="p-3 bg-slate-100 rounded">
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  );
}

Server vs Client Capabilities

TL;DR

• App Router components default to React Server Components (RSC).
• RSCs can be async functions, permitting direct database or API fetching.
• Heavy npm dependencies used in RSCs are evaluated on the server and omitted from client JavaScript bundles.
• RSCs cannot use state, effects, or browser DOM event handlers.