React Server Components

After this lesson, you will be able to: Understand React Server Components (RSC): when they run, what they can/can't do, vs Client Components.

RSC is React's biggest architectural shift since hooks. Next.js + many frameworks use them. Knowing the boundary is the senior signal.

Prerequisites:Testing React

What an RSC is

Server Component: runs ON THE SERVER, never in the browser. Output is serialized HTML/JSX + props. Client Component: hydrates in the browser; can use useState, useEffect, event handlers. Default in Next.js App Router: Server. Opt into Client with `'use client'` directive at the top of a file.

When to use each

Boundary at the leaf where interactivity starts.

html

// app/users/page.tsx, Server Component (no 'use client')
import { db } from "@/lib/db";
import { UserSearchInput } from "./UserSearchInput";   // Client Component

export default async function UsersPage({ searchParams }) {
  const params = await searchParams;
  const users = await db.user.findMany({
    where: { name: { contains: params.q } },
  });

  return (
    <div>
      <UserSearchInput />
      <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>
    </div>
  );
}

// app/users/UserSearchInput.tsx, Client Component
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";

export function UserSearchInput() {
  const [q, setQ] = useState("");
  const router = useRouter();
  return <input value={q} onChange={(e) => { setQ(e.target.value); router.push(`?q=${e.target.value}`); }} />;
}

What RSCs CAN and CAN'T do

CAN: await async data fetching directly. Access DB / files / env secrets. Render React components. CAN'T: use useState / useEffect / refs. Handle events. Use browser APIs (window, localStorage). Trickle the data: server pages fetch + pass to client components as props.

Common mistakes only experienced RSC devs avoid

Forgetting 'use client' on components that need useState. Confusing build errors. Importing server code (DB clients) into client components. Bundler tries to bundle the server code. Marking everything 'use client' on the page. Defeats the RSC benefit. Calling server-only functions from client (use Server Actions instead).

Quick Check

Where should a client-only API key like Stripe's PUBLIC key live?

Pick the right boundary.

←Testing React

Back to React (Standalone Deep Dive)

Passion Project: React Hooks Library or Perf Showcase→