Server vs Client Components Questions

A component that runs only on the server (build time or request time). It can be async, access databases and secrets directly, and its code is never sent to the browser, so it adds zero bundle size. It cannot use state, effects, event handlers or browser APIs. Its output is sent as HTML plus an RSC payload that React uses to update the tree.

It marks a boundary: that module and everything it imports become part of the client bundle. Client Components are still pre-rendered to HTML on the server, then hydrated. It does not mean "render only on the client". Put it on small interactive leaves, not on pages or layouts.

It cannot import one (the import would turn it into client code). It can receive Server Components as children or other JSX props, which are rendered on the server and passed in:

// server page
<ClientTabs specs={<SpecsTable id={id} />} reviews={<Reviews id={id} />} />

Serializable values: strings, numbers, booleans, null/undefined, plain objects and arrays, Date, Map, Set, typed arrays, Promises, JSX, and Server Actions. Not allowed: ordinary functions, class instances (methods are lost), symbols. Convert ORM objects (e.g. Prisma Decimal) to plain DTOs first.

Put import 'server-only' at the top of data/secret modules: the build fails if a Client Component imports them. Keep secrets in non-NEXT_PUBLIC_ env vars, return DTOs from a Data Access Layer, and optionally use React's taint APIs.