Next.js Rendering (Cooking Analogy)

Next.js lets you control when and where rendering happens. 1. Client-Side Rendering (CSR) — browser cooks everything This is the classic React behavior. You visit /products , and the browser gets an empty shell first. Then JavaScript runs, makes a request, and fills the data. " use client " import { useEffect , useState } from " react " export default function ProductsPage () { const [ products , setProducts ] = useState ([]) useEffect (() => { fetch ( " /api/products " ) . then ( res => res . json ()) . then ( setProducts ) }, []) return ( <> < h1 > New Products </ h1 > { products . map ( p => < div key = { p . id } > { p . name } </ div >) } </> ) } Timeline of reality: Browser loads page Page is empty or loading JS runs JS fetches data UI updates User waits longer. This is slower. When to use: User dashboards Interactive UI Forms User-specific content When SEO is not important When NOT to use: Public pages Product listings Blogs SEO pages 2. Server-Side Rendering (SSR) — server cook