Rendering & Architecture Rendering Strategies

14. Rendering Strategies: SSG, SSR, Hybrid & CSR

Compare static generation, dynamic server rendering, hybrid incremental regeneration, and client-side single page app models for speed and cost.

strategies.ts

typescript

// Rendering Architecture Comparison Matrix
export type RenderingStrategy = 'SSG' | 'SSR' | 'HYBRID' | 'CSR';
export interface StrategyMetrics {
  name: RenderingStrategy;
  ttfbMs: number;
  fcpMs: number;
  computeCost: 'Zero (Static CDN)' | 'Dynamic Serverless' | 'Client Heavy';
  useCase: string;
}
export const strategies: Record<RenderingStrategy, StrategyMetrics> = {
  SSG: {
    name: 'SSG',
    ttfbMs: 15,
    fcpMs: 120,
    computeCost: 'Zero (Static CDN)',
    useCase: 'Documentation, Marketing, Knowledge Portals, Product Catalogs'
  },
  SSR: {
    name: 'SSR',
    ttfbMs: 180,
    fcpMs: 340,
    computeCost: 'Dynamic Serverless',
    useCase: 'Personalized Dashboards, Dynamic Social Feeds, Real-time Stock Data'
  },
  HYBRID: {
    name: 'HYBRID',
    ttfbMs: 25,
    fcpMs: 150,
    computeCost: 'Dynamic Serverless',
    useCase: 'E-commerce (Static Shell + Streaming Product & Inventory)'
  },
  CSR: {
    name: 'CSR',
    ttfbMs: 20,
    fcpMs: 650,
    computeCost: 'Client Heavy',
    useCase: 'Single Page Web Applications behind strict user login'
  }
};

Rendering Strategies: SSG, SSR, Hybrid & CSR

Selecting the appropriate rendering model balances Time to First Byte (TTFB), First Contentful Paint (FCP), SEO indexability, and cloud infrastructure expenditure.

SSG (Static Site Generation): Pre-renders HTML at build time for instant CDN delivery and zero server compute overhead.
SSR (Server-Side Rendering): Renders fresh dynamic HTML on every request for personalized, real-time data.
Hybrid / ISR: Combines static caching with background regeneration triggers.
CSR (Client-Side Rendering): Offloads rendering entirely to the browser for thick, offline-capable applications.

Rendering Architecture Decision Matrix Rendering Tradeoffs