🧠 Server Side vs Client Side Rendering

🔹 Server Side Rendering (SSR)

SSR (Server Side Rendering) ka matlab hai ke HTML server pe generate hoti hai aur browser me send hoti hai. Next.js me layouts & pages by default 'Server Components' hote hain — yeh rendering server par hoti hai, not browser.

  • Layouts & pages are Server Components by default in Next.js
  • Data fetch server pe hoti hai, HTML pre-render ho jata hai
  • Performance aur SEO ke liye best approach
  • Browser ko kam JavaScript bhejna padta hai

🔸 Client Side Rendering (CSR)

Jab interactive UI chahiye (like buttons, input handling, etc.), tab aap 'use client' likh ke Client Components use karte ho. Yeh components sirf browser me run karte hain.

  • Client Components allow interactivity (hooks/events)
  • React code browser me execute hota hai
  • JavaScript bundle size zyada hota hai
  • SEO optimize karne ke liye extra efforts chahiye

✅ Pro Tip: Next.js allows hybrid rendering. SSR se performance milegi, aur CSR se rich interactivity. Use both strategically!