CSR

Client-Side Rendering defers meaningful UI to the browser after JavaScript loads and executes. In Next.js, heavy CSR often appears in Client Components, client-only data hooks, or legacy SPA islands inside a mostly static shell.

CSR fits authenticated tools, highly interactive editors, and views where SEO is irrelevant and first paint can show a lightweight shell.

On interviews: explain SEO and LCP impact, hydration cost, and when a static shell plus client island is healthier than full CSR.

Common pitfalls: empty initial HTML for public pages, waterfall client fetches after hydration, and shipping large bundles for simple content.

The trade-off is rich interactivity versus crawlability and first-load performance.

Checklist:

• Keep public marketing out of CSR-only shells.
• Colocate data fetching with the client island that needs it.
• Split bundles for heavy widgets.
• Provide loading and error UI during fetch.