Jan 03, 2022Last modified June 1, 2025

Rendering strategies for web applications

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

Strategy	Pros	Cons	Best 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