Server rendering runs your components in both places. Server Components add a third: code that runs before bundling, at build time or per request, in an environment that is neither the client nor the SSR pass. It never reaches the browser, so such a component may await a database query, read a file, or import a 200 KB markdown parser without a byte of it being downloaded.
Directives mark the split. A file whose first line is 'use client' is a boundary: that module and everything it imports are compiled into the client bundle, and its components behave as they have all chapter — state, Effects, onClick. Everything above the boundary stays on the server, and there is no directive for it; a Server Component is simply one that no client module imports. It may be async and await in its body, and it may pass rendered JSX down as props or children, which is how a server tree wraps interactive islands. 'use server' is different: it marks Server Functions, which the client calls over the network, not components.
Two consequences follow: Server Components hold no state and attach no handlers, and values crossing to the client must be serializable, so passing a function or a class instance is an error you will meet early.
The machinery behind this — a bundler that understands the directives, a route that serializes the payload, a client runtime that requests it — is a framework's job. Next.js builds real pages this way in Next.js 10,514 : where the boundary belongs, and how Server Functions replace an API endpoint for forms.