ReactServer ComponentsNext.js
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
tsx
// 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).
tsx
// ✅ Server Component passes data to a small client island
<ProductCard product={product}>
<AddToCartButton id={product.id} /> {/* "use client" */}
</ProductCard>Props Must Be Serializable
You can pass data from a Server to a Client Component, but not functions or class instances. Pass plain objects, and pass children as Server-rendered slots.
