Home
Jan 03, 2022Last modified June 1, 2025

CSR, SSR, SSG, or ISR? Choosing the Right Web Rendering Strategy

CSR

Sample example

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(res => setData(res.json()));
  }, []);
  return <div>{data ? data.content : 'Loading...'}</div>;
}
import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(res => setData(res.json()));
  }, []);
  return <div>{data ? data.content : 'Loading...'}</div>;
}

SSG

ISG

SSR

Sample example

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } }; // Passed to page component
}

// page component rendering logic here
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } }; // Passed to page component
}

// page component rendering logic here

Comparison

StrategyProsConsBest Use Cases
Client-Side Rendering (CSR)
  • Dynamic, app-like interactions
  • Simple server setup
  • Poor SEO (empty initial HTML)
  • Slow initial load
  • Logged-in apps (dashboards, admin panels)
  • When SEO isn’t needed
Server-Side Rendering (SSR)
  • SEO-friendly (full HTML)
  • Fast First Paint
  • High server load
  • Slower Time-to-Interactive (TTI)
  • E-commerce, news sites
  • Pages requiring real-time data
Static Site Generation (SSG)
  • Blazing-fast loads (CDN-cached)
  • Zero server runtime cost
  • Stale content (requires rebuilds)
  • Not for dynamic data
  • Blogs, documentation
  • Marketing sites
Incremental Static Regeneration (ISR)
  • Dynamic + static benefits
  • No full rebuilds needed
  • Staleness during revalidation
  • Cache management complexity
  • E-commerce product pages
  • Content with periodic updates
Edge Rendering
  • Ultra-low latency (global CDN)
  • Reduced origin server load
  • Limited by edge runtime (e.g., no Node.js)
  • Higher vendor lock-in
  • Global audiences
  • Real-time apps needing low latency