In the App Router, every component is a Server Component by default. That means it renders on the server, with no JavaScript shipped to the browser unless you opt into a Client Component with the "use client" directive.
This is a mental shift: the default is server-side, and you opt in to client interactivity only where you need it.
Server Components: the default
Server Components can read databases, call APIs and use secrets safely — none of that code reaches the browser.
- Best for data fetching, rendering, SEO-critical content.
- Shrink the JavaScript bundle significantly.
- Cannot use hooks like useState or useEffect.
If a component does not need interactivity, keep it a Server Component. Most of a page should be server-rendered.
Client Components: opt in deliberately
Add "use client" for anything interactive: event handlers, state, browser APIs, or components that must run in the browser.
The golden rule
Client components cannot import server components, but they can receive server-rendered data as props. Keep the client boundary thin: a small interactive island wrapped in a server-rendered page.
Server components FAQ
How do I know if a component should be client or server?
If it needs state, effects or event handlers, it is a client component. If it just renders data, keep it a server component.
Does using client components hurt SEO?
No — Next.js still server-renders the HTML for SEO. Client components mainly add JavaScript for interactivity after the initial render.
