What Server Components are, how they differ from Client Components, and when to use each in the App Router.
Server Components run only on the server and ship zero JS by default. Here’s how they work in Next.js and how to use them well.
Server and client components in Next.js
What they are
Server Components — Rendered on the server. Can async fetch, access backend, use Node APIs. No useState, useEffect, or browser APIs. Default in app/.
Client Components — Marked with "use client". Run in the browser, can use hooks and event handlers. Import them into Server Components as boundaries.
Boundary — Once you import a Client Component, that subtree is client; its parent can still be server. Keep client islands small.
Benefits (conceptual):
Impact of Server Components (relative)
When to use which
Use Server Components for static or server-fetched content, layouts, and data-heavy pages. Use Client Components for interactivity: forms, modals, client state, and browser APIs. Fetch in Server Components and pass data as props to Client Components.
Server Components in practice:
Takeaway
Server Components reduce client JS and simplify data fetching. Use them by default; add "use client" only where you need interactivity.
