intermediate

Server and client boundaries

Choose where code executes, what can cross the boundary, and how data and actions move between server and client.

Boundary interviews test where code executes and what may cross the wire. Server Components default in App Router; Client Components opt in with `use client` for events, state, effects, and browser APIs.

Subtopics: Server Components, Client Components, Server Actions, and server-side data fetching patterns.

On interviews: draw the boundary on a diagram — which module imports server-only packages, which props serialize, and where mutations run.

Common pitfalls: importing server-only code into client bundles, passing functions or class instances as props, and duplicating fetch on client after server already loaded data.

Checklist:

  • Default server; opt into client deliberately.
  • Serialize only supported prop shapes.
  • Keep secrets and DB clients server-side.
  • Pair reads on server with mutations via actions or APIs.