rsc-boundarylisted

# The server/client boundary (Next App Router) ## Confirm the router mode first, always ```bash lazysitter fe-index stack # reports app | pages | app+pages mid-migration ``` `app+pages` is **mid-migration**, not a free choice. Which one new code belongs in is a `fact` with a real answer — raise a FACT-BLOCK rather than picking the one you prefer. ## The boundary is a correctness boundary A **Server Component** runs on the server only. It cannot use `useState`, `useReducer`, `useEffect`, `useLayoutEffect`, `useRef`, `useContext`, `createContext`, event handlers, or browser APIs. It can be `async`, read the filesystem, query a database, and hold secrets. A **Client Component** — a file with `'use client'` at the top, or any file imported by one — runs on the server for the initial HTML **and** in the browser. It can do everything React can do, and its code is shipped to the browser. ```bash lazysitter fe-index signals --rule NEXT ``` catches the mechanical violations: client APIs with no directive, boundaries pushed too high, server-only modules in client files. ## Place the boundary at the narrowest interactive component The most common Next mistake is `'use client'` at the top of a page or layout. It marks **the entire subtree** as client code — the app is now a client-rendered SPA with extra steps, and the server-rendering benefit is gone for everything below. The pattern that works: keep the page a Server Component, fetch there, and push `'use client'` down