Server Components vs Client Components — When Each Matters
Understand the difference between server and client components, the 'use client' directive, and when to use each.
If you've been following along, you've probably noticed something odd in the React examples: some components have "use client" at the top, and some don't. This isn't random. It's one of the most important concepts in modern Next.js, and getting it right means the difference between a fast, secure app and one that's slow and leaking secrets.
Don't worry — it's simpler than it sounds.
The Two Places Code Can Run
When someone visits your website, two computers are involved:
- The server — a computer in a data center (managed by Vercel) that processes requests and sends data
- The client — the user's browser on their phone, tablet, or laptop
In traditional web development, all your JavaScript runs in the browser (the client). The server just sends HTML files and maybe some
This lesson is part of the Guild Member curriculum. Plans start at $29/mo.