React Server Components Explained (And When to Use Client Components)

Server Components are the default in the App Router, and misunderstanding the boundary is the root of most 'why is my bundle huge' and 'why can't I use useState' confusion. Let's make it click.

Server vs Client at a Glance

• Server Components can fetch data directly, access secrets, and ship zero JavaScript — but cannot use state, effects, or browser APIs.
• Client Components ("use client") can use hooks and interactivity — but are bundled and sent to the browser.

Fetch Data Directly in Server Components

// No useEffect, no loading state — just await
export default async function Page() {
  const products = await db.product.findMany();
  return <ProductGrid products={products} />;
}

Keep Client Components at the Leaves

The number one mistake is adding "use client" near the top of the tree, which drags everything below it into the client bundle. Instead, keep pages and layouts as Server Components and push "use client" down to the small interactive pieces (a button, a dropdown).

// ✅ Server Component passes data to a small client island
<ProductCard product={product}>
  <AddToCartButton id={product.id} /> {/* "use client" */}
</ProductCard>