Server Components — A Taste

Server Components are a way to render parts of your React tree on the server only — they ship as HTML and serialized data, with zero JavaScript for those parts going to the browser.

The interactive bits (event handlers, state) are client components, marked with "use client" at the top of the file.

This lesson is a tasting menu — full RSC requires a framework (Next.js, Remix, or React’s own server framework setup) and is beyond the scope of a fundamentals track.

What It Looks Like

A server component:

// app/UserList.jsx — runs on the server
async function UserList() {
  const users = await db.users.findAll();   // direct DB access!
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

A client component:

"use client";   // ← marks the file as client-rendered

import { useState } from "react";

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

The server component can import and render the client one. The inverse is more restricted — client components can receive server components as children props but can’t import them directly.

The Big Wins

• No JS shipped for the parts that don’t need interactivity → smaller bundles, faster pages
• Direct data access from components (database, file system, internal APIs) — no client-side fetch
• Smaller payloads — no need to send component code that runs only on the server

The Trade-Offs

• Server components can’t use useState, useEffect, or any other hooks — they only render once on the server
• The boundary between server and client adds complexity to think about
• Requires a framework that supports RSC

When To Care

If you’re building an SPA with Vite, you’re not using RSC. If you’re using Next.js 14+, every component is a server component by default, and you opt into client with "use client".

This lesson is a heads-up. When you’re ready to ship something real on Next.js or another RSC-capable framework, you’ll know the shape of the model.

Chapter Done

That’s the patterns chapter. Last stop: shipping real apps.