SSR & SSG & CSR & ISR
Different Web Rendering Modes
CSR - Client-Side Rendering
CSR initially loads a minimal HTML page, then JavaScript executes in the browser to generate the content. This is the traditional approach for SPAs (Single Page Applications).
Advantages:
- Smooth navigation between pages
- Rich interactivity
- Less server load
Disadvantages:
- Slower initial load
- More difficult SEO
- Dependence on enabled JavaScript
Frameworks: React, Vue.js, Angular (SPA mode)
SSR - Server-Side Rendering
SSR generates the complete HTML on the server before sending it to the browser. Each page is built on demand upon request.
Advantages:
- Fast initial load
- Excellent for SEO
- Works without JavaScript
- Good for slow devices
Disadvantages:
- More server load
- Slower navigation between pages
- Development complexity
Frameworks: Next.js (React), Nuxt.js (Vue), SvelteKit
SSG - Static Site Generation
SSG pre-generates all pages in HTML at build time. The static files are then served directly.
Advantages:
- Maximum performance
- Very secure
- Simple and inexpensive hosting
- Excellent SEO
Disadvantages:
- Static content only
- Rebuild required for updates
- Less suitable for dynamic content
Tools: Gatsby, Next.js (static mode), Hugo, Jekyll, Eleventy
ISR - Incremental Static Regeneration
ISR is a powerful hybrid between SSG and SSR. Pages are statically generated at build time but can be updated (regenerated) periodically in the background after deployment, without requiring a complete site rebuild.
Advantages:
- Static speed for the majority of users
- Content can be updated without redeployment
- Avoids very long build times on large-volume sites (e.g., e-commerce with thousands of products)
- Good resilience: even if the data source is down, the old static version continues to be served.
Disadvantages:
- More complex to configure
- A small number of users may see "stale" content for a short time.
- Requires compatible hosting infrastructure (e.g., Vercel, Netlify).
Frameworks: Next.js (pioneer of this approach)
When to Use What?
- SSG: Blogs, showcase sites, documentation (content that changes little).
- SSR: E-commerce, applications with highly personalized and real-time content, dashboards.
- CSR: Very complex web applications (SaaS type), administration dashboards where SEO is not a priority.
- ISR: Sites with very large content that changes occasionally (news sites, large e-commerce sites, very active blogs).
- Hybrid: Most modern applications combine these approaches according to the needs of each page.