SSR / SSG / ISR
Definition & meaning
Definition
SSR (Server-Side Rendering), SSG (Static Site Generation), and ISR (Incremental Static Regeneration) are three rendering strategies for web applications that determine when and where HTML is generated. SSR generates HTML on the server for every request, ensuring always-fresh content but adding server load and latency. SSG generates all HTML at build time, producing blazing-fast static pages but requiring rebuilds for content changes. ISR (pioneered by Next.js and Vercel) combines both: pages are statically generated but automatically regenerate in the background after a configurable time period, delivering both speed and freshness. Most modern Next.js applications use a hybrid approach — SSG for marketing pages, ISR for content pages (with revalidation periods from 30 minutes to 24 hours), and SSR for personalized or real-time pages like search results.
How It Works
SSR (Server-Side Rendering), SSG (Static Site Generation), and ISR (Incremental Static Regeneration) are three rendering strategies that determine when and where HTML is generated. With SSR, the server builds the full HTML page on every request — the browser receives ready-to-display markup, which means search engine crawlers see complete content immediately. SSG takes a different approach: pages are pre-built at build time into static HTML files and served directly from a CDN, eliminating server computation at request time entirely. ISR, pioneered by Next.js, combines both models. Pages are statically generated at build time, but individual pages can be regenerated in the background after a configurable revalidation interval. When a user requests a stale page, they receive the cached version instantly while the server rebuilds a fresh copy for subsequent visitors. This gives teams the performance of static with the freshness of dynamic rendering, without full rebuilds.
Why It Matters
Choosing the right rendering strategy directly impacts Core Web Vitals, SEO rankings, and user experience. SSR ensures crawlers always see up-to-date content, making it ideal for dynamic pages like dashboards or personalized feeds. SSG delivers the fastest possible Time to First Byte (TTFB) because there is no server processing — perfect for marketing pages, blogs, and documentation. ISR solves the scaling problem: sites with thousands of pages no longer need 30-minute builds every time content changes. We use these strategies selectively across our projects, matching each page's requirements to the right rendering model rather than applying a one-size-fits-all approach.
Real-World Examples
Next.js is the most popular framework offering all three strategies in a single project — you can mix SSR, SSG, and ISR page by page. Nuxt 3 provides similar hybrid rendering for Vue applications. Gatsby historically championed pure SSG for content-heavy sites. An e-commerce store might use SSG for category landing pages, ISR for product detail pages that update hourly, and SSR for the shopping cart with real-time inventory. Vercel's Edge Network and Netlify both optimize delivery of statically generated and ISR content. Astro also supports SSG and SSR with its island architecture, making it a strong choice for content-driven sites.
Tools We've Reviewed
Related Terms
Next.js
DevelopmentFull-stack React framework by Vercel for production web applications.
Caching
InfrastructureStoring data copies in fast-access locations to avoid repeating expensive operations.
JAMstack
DevelopmentWeb architecture serving pre-rendered pages from CDN with API-powered functionality.
CDN
InfrastructureGlobal server network delivering content from the location nearest to each user.