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