Where your code actually runs

In the App Router every component is a server component by default. It runs on the server, during the request, and its code is never sent to the browser. It can read the filesystem, query the database, and use secrets — because none of it leaves the server.

What it cannot do is anything stateful or interactive. No `useState`, no `useEffect`, no event handlers, no browser APIs. Those need `"use client"`.

// no directive = server component.
// this SQL never reaches the browser, and neither does the client.
import { db } from '@/lib/db';

export default async function OrdersPage() {
  const orders = await db.query.orders.findMany({ limit: 50 });
  return <OrderTable orders={orders} />;
}

This is the detail that trips everyone up. `"use client"` does not mean "this component is a client component". It means "from here down, everything imported is part of the client bundle."

If a client component imports a utility, that utility ships to the browser. If that utility imports your database module, you get a build error — or worse, you leak something. The directive marks the boundary of the client half of your program.

A client component cannot import a server component. It can render one passed to it as a prop. This is the escape hatch that keeps interactive shells — accordions, tabs, modals — from dragging their whole contents into the browser bundle.

// ✗ this pulls HeavyServerThing into the client bundle
'use client';
import { HeavyServerThing } from './heavy';
export function Panel() {
  const [open, setOpen] = useState(false);
  return open && <HeavyServerThing />;
}

// ✓ the shell is interactive, the contents stay on the server
'use client';
export function Panel({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      {open && children}
    </>
  );
}

// app/page.tsx — server component composes the two
<Panel>
  <HeavyServerThing />
</Panel>

The rendered output of the server component is serialised and handed to the client component as an already-rendered tree. The client component never sees its source, so its dependencies never ship.

• Start every component on the server.
• Push `"use client"` as far down the tree as it will go — to the button, not the page.
• If a client component needs server data, pass it as a prop rather than fetching it in an effect.
• When you need both, make the client component a shell and pass server-rendered children into it.