Next.js App Router Server vs Client Components
In Next.js App Router, when do you use Server Components vs Client Components ('use client')?
Answers use simple, clear English.
Audio N/AQuick interview answer
Default Server Components render on the server — great for data fetching, secrets, less JS shipped. Use Client Components for interactivity (state, effects, browser APIs). Push 'use client' to the leaves; pass serializable props from server parents.
Detailed answer
Default Server Components render on the server — great for data fetching, secrets, less JS shipped. Use Client Components for interactivity (state, effects, browser APIs). Push 'use client' to the leaves; pass serializable props from server parents. Don't put secrets in client bundles.
Real example & use case
Product page fetches DB data in a Server Component and wraps an AddToCart button as a small client island.
Pros & cons
Pros: less client JS, secure server data access. Cons: mental model and serialization boundaries take practice.