Server-Side Rendering and Hydration
The full rendering strategy spectrum. CSR, SSR, SSG, ISR, streaming SSR, React Server Components, and the hydration cost nobody talks about.
When does HTML get generated? Understand the four rendering strategies, their tradeoffs, and when to pick each one for production applications.
The server sends dry HTML, the client adds water (JavaScript). Understand React's hydration algorithm, event attachment, selective hydration, and why it costs so much.
When server HTML doesn't match client output, React screams. Learn the common causes, the debugging workflow, and battle-tested fixes for production hydration errors.
Stop waiting for the slowest API. Stream HTML in chunks as data resolves, giving users instant content while slow parts load in the background.
Components that run only on the server, ship zero JavaScript to the client, and can directly access databases and file systems. The biggest shift in React's architecture since hooks.
It's not a component marker — it's a module boundary. Understand what 'use client' actually does, the serialization rules, and patterns for keeping client JS minimal.
Why hydrate the entire page when only the buttons need JavaScript? Understand islands architecture, partial hydration, and how frameworks like Astro changed the game.
The best of static and dynamic in one response. Next.js PPR serves an instant static shell from the CDN while streaming dynamic content in the same request.
What if the browser could resume where the server left off — no re-execution, no hydration? Understand Qwik's radical approach to zero-hydration applications.
Render HTML close to the user, not in a distant data center. Understand V8 isolates, edge runtimes, API limitations, and when edge rendering actually helps.
Battle-test your server rendering knowledge. 15 challenging scenarios — decide if a component should be a Server Component, Client Component, or something else entirely.