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.
Quick 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.