What runs where, and the React 19 + Next.js 16 patterns.

React Server Components — The Boundary Mental Model

React Server Components (RSC) run on the server and stream serialised React trees to the client — no JS bundle, direct DB access, and automatic code-splitting at the server/client boundary. The mental model is a single component tree where some nodes run on the server and others hydrate in the browser. Understanding the boundary — and how Server Actions wire mutations back — is the key skill.

Interactive Pipeline Flow

SetupCoreOutput

🌐 Request — URL → Next.js 16

A request arrives. Next.js 16 matches a route and begins rendering the RSC tree starting from the page.tsx Server Component.

Architecture Diagrams

Decision tree: should this component be a Server or Client Component?

Loading diagram...

Key Design Decisions

🚫Never import CC into RSC directly if CC has "use client"

Pass Client Components as children or props. The RSC renders the CC boundary; the server never executes CC code.

💡"use client" propagates downward

Marking any component "use client" makes all its imports into Client Components too. Push the boundary as deep as possible.

⚡Server Actions replace API routes for mutations

Async functions marked "use server" run on the server but can be called from Client Components. No manual fetch() needed.

Discussion