What are React Server Components and how do they differ from client components?

Question

Accepted Answer

**Server Components (RSC)** render on the **server** and send a serialized result to the browser. They ship **zero JavaScript** for themselves — only the data/markup, not their code. ## The two kinds ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Capabilities and constraints | | Server Component | Client Component | |---|---|---| | Can `await` / fetch data directly | ✅ | ❌ | | Access server resources/secrets | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Ships JS to the browser | ❌ (zero) | ✅ | ## Why it matters - **Less client JavaScript** → faster loads and interactivity. - **Data fetching next to the source** (no API round-trip from the browser, no exposing DB credentials). - You **compose** them: server components render client components for the interactive "islands." A server component can render a client one, but **not** vice-versa. ## Gotcha Props passed across the server→client boundary must be **serializable** — you can't pass functions or class instances. RSC changes the mental model from "everything runs in the browser" to "render on the server by default, opt into the client only where you need interactivity."

	Server Component	Client Component
Can `await` / fetch data directly	✅	❌
Access server resources/secrets	✅	❌
`useState`/`useEffect`/events	❌	✅
Ships JS to the browser	❌ (zero)	✅