CSR, SSR, SSG, ISR, and OMG. WTF? BBQ!
summary
Concrete comparison of rendering modes with Next.js, live demo and numbers: CSR ≈100ms, SSR ≈800ms, SSG ≈124ms with ISR adding on‑demand generation. Uses Next.js, SWR for client caching, Vercel/CDN for static delivery. Shows country pages generated statically or on request, explains when pages are SEO friendly, cacheable, or require per‑request compute, and demonstrates ISR adding new paths at first request and then serving cached HTML thereafter.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:05Speaker and Next.js basics
- 2:09Client-side rendering
- 4:56Client-side pros and cons
- 6:21Server-side rendering in Next.js
- 8:52Server-side pros and cons
- 10:57Static generation basics
- 13:06Static generation vs ISR
- 15:57How ISR works
- 16:58Static generation pros and cons
- 18:00Rendering methods compared
- 19:28Summary and call to action
related talks
20mNext js CSR, SSR, and SSG
30m50 shades of React rendering with Next.js
45mGive Me Back My Frontend!
55m50 Shades of React Rendering with Next js
45mThe War of HTML Rendering: SSR, CSR and Hybrid Rendering — Which Is Fastest?
27mSSR & SSG in NextJS
30mRendering Revealed
44mServer Side Rendering from the trenches