Server vs Client Components

Learn the App Router's biggest idea: components run on the server by default, and you opt into browser interactivity with 'use client'.

Step 1 of 2

Server by default, client when you need it

Here's something new that the CDN-React setup never had: in the App Router, your components run on the server by default. They're called Server Components. They render to HTML on the server and send it to the browser ready-made — fast, and great for content.

But the server has no clicks, no typing, no useState — that interactivity only exists in the browser. When a component needs state, event handlers, or effects, you mark it as a Client Component by adding "use client" as the very first line of the file.

Server Component (default): a blog article, a product description, a page that fetches data. No interactivity.
Client Component ("use client"): a like button, a search box, a counter, anything using useState/useEffect/onClick.

Real-world: on a product page, the description and price are a Server Component (just content), while the "Add to cart" button is a Client Component (it reacts to clicks).

Think of it this way: Think of a restaurant menu (Server Component) versus the "call the waiter" button (Client Component). The menu is printed once and handed to you — no interactivity needed. The button has to respond the moment you press it, so it needs to live where the action is.

Web Standard — why split at all?

Server Components ship less JavaScript to the browser (the user downloads HTML, not your component code) and can safely use secrets like API keys, because that code never reaches the browser. You only pay the cost of shipping JS for the parts that truly need to be interactive.

Learn more on MDN

Next.js — Server and Client Components

TYPESCRIPTREAD ONLY