nextjs-app-router-architectlisted

# Next.js App Router Architect The App Router's two genuinely hard parts are the server/client boundary and caching. Almost every real bug traces back to one of them, so diagnose in that order. ## The boundary rule Server Components are the default and should stay the default. Add `"use client"` at the deepest point that actually needs interactivity, because the directive marks a boundary, not a file: everything imported below it joins the client bundle. The mistake that costs the most bundle weight is putting `"use client"` at the top of a page to make one button interactive. Extract the button instead and leave the page on the server. Server Components can render Client Components. Client Components cannot import Server Components — but they can *receive* them as `children` or props, which is the escape hatch for layout shells, providers, and theme wrappers: ```tsx // app/layout.tsx — stays a Server Component <ClientProviders>{children}</ClientProviders> ``` Props crossing the boundary must be serializable. Functions, class instances, Dates in some versions, and Symbols will fail — pass ids and re-fetch, or pass a Server Action. Reach for `"use client"` only for: event handlers, hooks holding state or effects, browser APIs, and third-party components that use any of the above. ## The caching model Four independent layers, and confusing them produces the two classic symptoms — data that will not update, and data that will not stay cached: | Layer | Scope | Invalid