One of the most important architectural decisions in the [Next.js App Router](/courses/nextjs) is deciding **where the Server Component tree should become interactive client-side code**. [Server Components](/courses/nextjs) are the default, so a good starting point is: ```text Server by default Client only where interaction requires it ``` ### Poor Boundary ```tsx 'use client'; export default function ProductPage() { // entire page becomes part of client-side component graph } ``` when only one small favorite button needs interaction. ### Better Boundary ```tsx import FavoriteButton from './FavoriteButton'; export default async function ProductPage() { const product = await getProduct(); return (

{product.name}

{product.description}

); } ``` Client component: ```tsx 'use client'; export default function FavoriteButton({ productId }) { return ( ); } ``` The page and data fetching stay on the server while only the interactive button requires browser [JavaScript](/courses/javascript). ### Why Boundary Placement Matters Code imported below a `'use client'` boundary becomes part of the client module graph. Therefore placing `'use client'` too high can send more [JavaScript](/courses/javascript) to the browser than necessary. ### Good Client Component Candidates ```text Modal interaction Dropdown Search input with immediate interaction Drag-and-drop editor Theme switcher Interactive chart controls ``` ### Good Server Component Candidates ```text Database-backed article content Product listing Course content Static navigation structure SEO-heavy page content Server data aggregation ``` ### Composition Can Keep Boundaries Small A Client Component can receive server-rendered content through composition. Conceptually: ```tsx ``` This can avoid unnecessarily converting large parts of the tree into client-owned modules. ### Interview-Ready Answer Design Server/Client boundaries by keeping [Server Components](/courses/nextjs) as the default and adding `'use client'` as close as practical to components that need state, events, effects, or browser APIs. Boundary placement matters because modules imported below a Client Component boundary contribute to the client-side module graph, so smaller boundaries generally reduce unnecessary browser JavaScript.