SSG / SSR / Hybrid
What are SSG, SSR, and the Hybrid Approach?
When working with modern web applications—especially in JAMstack architectures and headless CMS like Content Island—it’s important to understand how content is generated and delivered. There are three main approaches: SSG (Static Site Generation), SSR (Server-Side Rendering), and the hybrid approach, which combines the best of both worlds.
🏗️ SSG – Static Site Generation
With SSG, website pages are generated at build time. This means dynamic CMS content is queried during the build process and converted into static HTML files ready to be served from a CDN.
Advantages
- ⚡ Excellent performance: HTML files are pre-generated.
- 🔒 Increased security: no server-side logic to exploit.
- 📦 Easy to deploy: can be served from any CDN globally.
- 🔄 Auto-updating content: by configuring a webhook from the CMS, a new build can be triggered whenever content is updated.
Disadvantages
- 🕐 Not ideal for frequently changing content.
- 🧱 Requires site rebuilds (full or partial) to reflect content changes.
🌐 SSR – Server-Side Rendering
With SSR, pages are dynamically generated on the server for each request. Content is queried in real time from the CMS and converted to HTML just before being sent to the browser.
Advantages
- 🔄 Always up-to-date content: great for dynamic or personalized content.
- 🛠️ Perfect for personalized experiences (e.g., authenticated users).
- 🧠 Some platforms support SSR caching, improving performance for content that doesn’t change often.
Disadvantages
- 🐢 Slower than SSG: generated on demand.
- 🌩️ Server dependency: higher complexity and more failure points.
🔀 Hybrid Approach
Many modern platforms (like Next.js or Nuxt) allow combining both approaches. You can decide which pages are statically generated (SSG) and which are served dynamically with SSR.
Common examples:
- Landing pages or blog posts: with SSG.
- User dashboards, shopping carts: with SSR.
- You can also use techniques like ISR (Incremental Static Regeneration) to regenerate static pages automatically after some time or events.
Advantages
- 🎯 Total flexibility: each page uses the approach that suits it best.
- ⚖️ Better overall performance, without sacrificing content freshness.
- 🧩 Scalability and section-based optimization.
General Comparison
| Criterion | SSG | SSR | Hybrid |
|---|---|---|---|
| Update Frequency | Low | High | Mixed |
| Performance | Excellent (CDN) | Good (server + cache) | Optimal per page |
| SEO | Very good | Very good | Very good |
| Complexity | Low | Medium/High | Medium |
| Ideal Scenarios | Blogs, landings, docs | Dashboards, dynamic apps | Complex and scalable sites |