Skip to content
Frontend Architecture Patterns

SSR, SSG & Hybrid Rendering

Hybrid Rendering strategies combine multiple rendering techniques to provide the SEO benefits of static content with the interactivity of SPAs.

Core Techniques

Section titled “Core Techniques”
  • Server-Side Rendering (SSR): Generates HTML on the server for every request.
  • Static Site Generation (SSG): Generates HTML at build time. Extremely performant and cacheable.
  • Hydration: The process of “attaching” JavaScript interactivity to the server-rendered HTML.

When it works well

Section titled “When it works well”
  • Public-facing apps: E-commerce and marketing sites that need both SEO and high interactivity.
  • Performance: Fast initial load (FCP) while maintaining app-like functionality.

Modern Advancements

Section titled “Modern Advancements”
  • Streaming SSR: Allows the server to send parts of the page as they are ready, rather than waiting for the whole page (React 18).
  • Incremental Static Regeneration (ISR): Allows updating static pages after build time without a full rebuild.

When it becomes problematic

Section titled “When it becomes problematic”
  • Hydration Mismatch: Bugs where the server-rendered HTML and client-rendered state don’t match exactly.
  • Complexity: “Isomorphic JS” (code that runs on both client and server) is difficult to debug and maintain.
  • Server Load: SSR increases infrastructure costs compared to static hosting.

Technical Complexity

Section titled “Technical Complexity”

High. Requires specialized frameworks like Next.js, Nuxt, or SvelteKit.

Section titled “Related Patterns”