SSR vs SSG vs SPA – Feature Comparison - paulip114/blog GitHub Wiki
| Feature | SPA (Single Page App) | SSG (Static Site Generation) | SSR (Server-Side Rendering) |
|---|---|---|---|
| 🧠 Rendered where | In the browser (client-side) | At build time | On the server, per request |
| 🧱 Initial load HTML | Empty shell → JS renders view | Full HTML pre-rendered | Full HTML rendered on request |
| 🚀 Performance | Slow initial load | Fast (served via CDN) | Slower than SSG but faster than SPA |
| 🔍 SEO friendliness | Poor (unless pre-rendered) | Excellent | Excellent |
| 🔄 Data freshness | Dynamic (API fetch in browser) | Stale unless rebuilt | Always fresh (server-side fetch) |
| 🎯 Personalization | After load (client logic) | Difficult (needs JS) | Easy (customize per request) |
| 🛠 Hosting | Static (Netlify, Vercel) | Static (Netlify, S3, etc.) | Server or serverless (Node.js required) |
| 💰 Cost | Cheapest | Cheap | Higher (requires server resources) |
| 🧪 Example | Vue + Vite default | Nuxt generate, vite-plugin-ssg | Nuxt SSR mode |
📘 Summary
✅ Use SPA when:
- You don’t care about SEO (e.g., admin panels, internal tools)
- The app is fully dynamic and requires user auth for most pages
✅ Use SSG when:
- You have mostly static content (e.g., blogs, landing pages, docs)
- You want fast load times + great SEO, and don’t need real-time data
✅ Use SSR when:
- You need up-to-date, dynamic data on every request
- You want server-based personalization (e.g., based on auth/session)
- SEO is important and content changes often (e.g., e-commerce product pages)
🧪 Bonus: Hybrid Options
Many modern frameworks (Nuxt, Next) allow mixing strategies:
| Page | Strategy |
|---|---|
| Homepage | SSG |
| Blog index | SSG |
| Blog detail | SSG or SSR |
| Dashboard | SSR or SPA |
| Auth/login | SPA |