50 Shades of React Rendering with Next js
summary
A live Next.js demo shows a blog built with the app router, Gemini AI content, and example code on GitHub, and compares rendering modes with measured results: CSR returns HTML in ~36 ms but full render takes seconds, SSR sometimes takes ~4.5 s to produce HTML, SSG returns a 13 ms HTML response. ISR is set to 15 second revalidate with background rebuilds and on‑demand revalidation; layouts, server/client component boundaries, streaming, and server actions are used.
AI-written summary · about
chapters (18)
- 0:00Introduction and setup
- 4:28Meet the speaker
- 6:56Client side rendering demo
- 8:03Client side rendering explained
- 13:46Server side rendering demo
- 14:52Server side rendering explained
- 18:47Static site generation demo
- 19:31Static site generation explained
- 24:11Incremental static regeneration demo
- 24:59Incremental static regeneration explained
- 31:04Combining rendering strategies
- 32:08Layouts and templates
- 33:15Component composition
- 34:18Loading UI and streaming
- 35:23Partial pre-rendering
- 35:46Server actions
- 37:11Resources and slides
- 38:15Key takeaways and Q&A
related talks
30m50 shades of React rendering with Next.js
08mLightning fast SSR React apps with top perceived performance and no (client side) JavaScript
20mCSR, SSR, SSG, ISR, and OMG. WTF? BBQ!
47mReact, Rendering, Performance
25mNext.js: Choosing an Optimal Rendering Pattern for your Application
45mGive Me Back My Frontend!
44mServer Side Rendering from the trenches
16mPerformance in React and Next.js