React Server Components vs. Client Components

"React Server Components (RSCs) represent the most significant architectural shift in React's history since the introduction of Hooks in 2018 — and like Hooks, they are widely misunderstood in the year following their stable release. The mental model required for effective RSC usage is fundamentally different from the client-centric thinking that most React developers have internalized over the past decade, which explains why the most common questions in Next.js forums in 2026 revolve around the placement of the 'use client' directive and the mysterious disappearance of component state. The core distinction is conceptually simple but architecturally profound: Server Components execute exclusively on the server (or during build time for static pages), have direct access to databases, file systems, and server-side secrets, produce zero JavaScript bundle impact, and cannot maintain interactive state or use browser APIs. Client Components execute in the browser, can use useState, useEffect, event handlers, and browser APIs, but contribute to your JavaScript bundle and cannot directly access server-side resources. The practical implication is a new compositional pattern: your application's component tree is now a hybrid of server and client nodes, and the boundary between them is explicit and intentional. A dashboard page might be a Server Component that fetches data directly from a database with Prisma, renders it into a structure, and passes the data as props to a Client Component chart library that requires browser APIs to render visualizations. The data fetching happens at zero bundle cost; the interactivity is isolated to only the component that genuinely requires it. Common mistakes include marking entire page layouts as 'use client' to avoid understanding the boundary, passing non-serializable props (like class instances or functions) across the server-client boundary, and placing data fetching inside Client Components where it could be handled more efficiently by a Server Component ancestor. This guide provides a practical decision framework for every component you write in the App Router."