What is the difference between CSR, SSR, SSG, and ISR?

These are four strategies for deciding where and when HTML is produced.

CSR (Client-Side Rendering) — the server sends a bare HTML shell; JavaScript downloads and renders everything in the browser. Fast TTFB, slow FCP, poor SEO.

SSR (Server-Side Rendering) — HTML is generated on the server per request. Good SEO and fast FCP but higher TTFB under load; server must run Node.

SSG (Static Site Generation) — HTML is generated once at build time and served as a static file from a CDN. Fastest possible delivery; stale for frequently changing data.

ISR (Incremental Static Regeneration) — SSG pages are regenerated in the background after a revalidate interval (Next.js). First visitor after expiry may see stale content while rebuild happens.

// Next.js ISR example
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // regenerate at most once per 60s
  };
}