React Server Components vs. Client Components

The one sentence mental model

A Server Component renders where your data lives; a Client Component renders where your user lives. Everything else follows from that sentence.

What Server Components give you

• Direct access to the database and filesystem without an extra API call.
• Zero runtime JavaScript for the parts that only display content.
• Smaller bundles, because libraries used on the server never reach the browser.

What forces a Client Component

• State and effects: `useState`, `useEffect`, event handlers.
• Browser APIs: geometry, media queries, storage.
• Context and interactivity that users feel immediately.

The tricky middle

Props passed from a server component become serialized data, so surprises hide in the boundary.

• Functions and class instances do not survive the boundary.
• Keep client components close to the interaction leaves, and push server components up toward the data roots.
• When a component "is both", split it: a client wrapper with a server body.

How this blog is organised

Pages and post bodies are server-rendered, while the theme toggle and the mobile menu are client islands. That split is why the site stays interactive while shipping a very small amount of JavaScript.

The takeaway

Stop thinking "this component can use hooks, therefore client". Ask where the work should run, then let the framework handle the rest.