Understanding CSR, SSR, SSG, and ISR

When building websites, one of the key decisions is how your pages are rendered. This affects performance, SEO, and user experience.

Client-Side Rendering (CSR)

The browser downloads a minimal HTML page and uses JavaScript to build the content dynamically.

• •Browser loads JS, fetches data, then renders the page
• •Great for highly interactive apps
• •Slower initial load, SEO needs extra work
• •Used in React SPAs

Server-Side Rendering (SSR)

The page is generated on the server for every request. The browser gets a fully rendered HTML page.

• •Server builds HTML on each request
• •Fast initial load, naturally SEO-friendly
• •More server load, can be slower if server is busy
• •Next.js uses this with getServerSideProps

Static Site Generation (SSG)

Pages are built ahead of time at build time and served as static files.

• •HTML generated during build, served instantly
• •Super fast, SEO-friendly, minimal server cost
• •Not ideal for frequently changing data
• •Next.js uses this with getStaticProps

Incremental Static Regeneration (ISR)

A hybrid approach that lets static pages update after deployment without rebuilding the entire site.

• •Pages pre-built, then regenerated in the background
• •Combines speed of static with flexibility of dynamic
• •Best for content that updates occasionally
• •Next.js uses this with revalidate option

Quick Summary

• •CSR: Dynamic, JS-heavy apps
• •SSR: Dynamic pages with SEO
• •SSG: Static pages, blazing fast
• •ISR: Static with periodic updates