React Server Components vs Client Components
02 // Simple Explanation (Mental Model)
Server Components run exclusively on the server and send pure HTML and JSON to the browser without increasing client JavaScript bundle size. Client Components run on both server (for SSR) and client, and support interactivity, browser APIs, and state hooks.
03 // Technical Deep Dive & Internals
RSC renders to a serialized streaming JSON format (the React Server Component payload). This payload contains the component tree, props, and references to client component bundle chunks. Because RSCs execute strictly on the server, they can directly query databases, read files, and import heavy dependencies without sending node_modules bytes to the client.
// app/users/page.tsx (Server Component by default)
import { db } from "@/lib/db";
import { UserCard } from "./user-card"; // Client Component
export default async function UsersPage() {
const users = await db.user.findMany();
return (
<div className="grid gap-4">
{users.map(u => (
<UserCard key={u.id} user={u} />
))}
</div>
);
}05 // Real-World Production Architecture
Data-heavy dashboards, static product catalogs, and marketing pages where high SEO and ultra-fast First Contentful Paint are required.
06 // Common Pitfalls & Mistakes to Avoid
Adding 'use client' at the top of every file out of habit, or trying to pass non-serializable objects from Server Components to Client Components.
09 // Quick Revision Notes (Pre-Interview Spec Sheet)
Default to Server Components. Only add 'use client' for hooks (useState, useEffect), event listeners (onClick, onChange), or browser APIs.