RSC vs Client Components
In a React Server Components / Next.js App Router app, how do you decide Server vs Client Components?
Answers use simple, clear English.
Quick interview answer
Default to Server Components for data fetching, secrets, and static UI (zero client JS). Add 'use client' only for state, effects, browser APIs, and event handlers. Keep client islands small at the leaves.
Detailed answer
Default to Server Components for data fetching, secrets, and static UI (zero client JS). Add 'use client' only for state, effects, browser APIs, and event handlers. Keep client islands small at the leaves. Pass serializable props across the boundary. Don't import client-only libraries into RSC files.
Real example & use case
Product page RSC fetches DB; <AddToCart /> client button island.
Pros & cons
Pros: smaller bundles, secure server data. Cons: serialization limits; mental model shift.