A mental model for Server Components

Server by default

In the App Router every component is a Server Component until you opt out with "use client". Data fetching, database access, and secrets all live on the server and never ship to the browser.

Reach for a Client Component only when you need interactivity — state, effects, or event handlers. Keep those leaves small and push everything else to the server.

A useful heuristic: if a component only renders data, it belongs on the server; if it reacts to the user, it is a client leaf.