Give Me Back My Frontend!
summary
Compares concrete front-end rendering modes—CSR, SSR, SSG, ISR, islands, and React Server Components—by building a small React app that loads the top 20 TMDB films with a favorites button to demonstrate hydration and client-only code. Measures trade-offs (CSR’s heavy JS and poor SEO vs SSR/SSG’s fast first paint and indexable HTML; ISR’s per-page revalidation; islands/Astro and server components reducing shipped JS) and demos implementations using Next.js, Astro, Vite, Tailwind, and React Query while highlighting rehydration pitfalls and hosting implications.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 3:09Frontend rendering evolution
- 11:29Client-side rendering
- 15:15Server-side rendering
- 22:04Static site generation
- 29:03Incremental static regeneration
- 32:18Partial architecture
- 37:55React Server Components
- 43:59Summary
related talks
30m50 shades of React rendering with Next.js
44mServer Side Rendering from the trenches
08mLightning fast SSR React apps with top perceived performance and no (client side) JavaScript
20mCSR, SSR, SSG, ISR, and OMG. WTF? BBQ!
45mThe War of HTML Rendering: SSR, CSR and Hybrid Rendering — Which Is Fastest?
21mImplementation and use cases of modern rendering patterns
25mNext.js: Choosing an Optimal Rendering Pattern for your Application
30mMicro Frontends in React — a State of the Art Approach