Foundations
Server Components vs. client islands
Lesson 1 of 7
What you'll learn
- Understand what a React Server Component (RSC) actually is
- Learn the rule for choosing server vs. client rendering
- Spot the "interactive islands" in a real page
In Next.js 16 with the App Router, every component is a Server Component by default. It runs once, on the server, and ships zero JavaScript to the browser. That's the opposite of the old model, where everything hydrated on the client whether it needed to or not.
You opt into the client only when you need interactivity, with the "use client" directive at the top of a file. Everything in that file — and everything it imports — becomes a client component.
The rule
Render on the server by default. Drop to the client only for islands that need:
- state or effects (
useState,useEffect) - browser APIs (
localStorage,window) - event handlers (
onClick,onChange) - React context that lives in the browser
Mental model
A lesson page is mostly static text rendered on the server. The code editor, the progress checkmark, and the theme toggle are the only islands. That's exactly how this very page is built.
Why it matters
Server Components mean less JavaScript, faster first paint, and direct access to your data layer without an API round-trip. The client bundle only contains the interactive bits — so it stays small even as your app grows.
The challenge below is a plain client component. Edit the count, click the button, and notice: this is the kind of stateful, interactive code that must be a client island. The surrounding prose you're reading is not.
This needs state and an onClick handler — so it's a client component. Try changing the starting count, then run it.
In the next lesson we'll look at how Next.js 16 decides what to cache and what to render fresh on every request.
Sign in to save your progress across devices.