Definition
SSG (Static Site Generation) est une technique de rendu web ou toutes les pages HTML sont generees au moment du build, puis servies comme des fichiers statiques. C'est l'approche la plus performante et la plus securisee pour les sites dont le contenu ne change pas a chaque requete.
Les fichiers statiques sont servis directement par un CDN, offrant des temps de chargement quasi-instantanes partout dans le monde.
Comment ca fonctionne
- Build time : le framework genere toutes les pages HTML
- Deploy : les fichiers statiques sont uploades sur un CDN
- Runtime : le CDN sert les fichiers directement, sans serveur
Donnees (API, BDD, fichiers) → Build → HTML/CSS/JS statiques → CDN → Utilisateur
Avantages
- Performance : pages pre-generees, servies par CDN (TTFB < 50ms)
- Securite : pas de serveur, pas de base de donnees exposee, pas d'injection SQL
- Cout : hebergement quasi-gratuit (Cloudflare Pages, Vercel, Netlify)
- SEO : HTML complet des la premiere requete
- Fiabilite : pas de panne serveur (fichiers statiques)
Inconvenients
- Build time : peut devenir long pour les gros sites (10k+ pages)
- Donnees statiques : le contenu n'est mis a jour qu'au rebuild
- Personnalisation : pas de contenu dynamique par utilisateur (sans JS client)
Frameworks SSG
| Framework | Langage | Particularite |
|---|---|---|
| Astro | Multi-framework | Islands, zero JS par defaut, ideal pour le contenu |
| Next.js | React | SSG + SSR + ISR, le plus polyvalent |
| Hugo | Go | Ultra-rapide (1ms/page), ideal pour les blogs |
| Gatsby | React | GraphQL data layer, plugins |
| 11ty | JS | Simple, flexible, zero config |
| SvelteKit | Svelte | SSG + SSR, performant |
ISR : le meilleur des deux mondes
L'ISR (Incremental Static Regeneration) combine SSG et SSR :
- Les pages sont generees statiquement au build
- Apres un TTL, la page est regeneree en arriere-plan a la prochaine visite
- L'utilisateur voit toujours une page statique (rapide) avec des donnees quasi-fraiches
Quand utiliser SSG ?
| Cas d'usage | SSG adapte ? |
|---|---|
| Blog, documentation | Oui (ideal) |
| Site vitrine, landing pages | Oui (ideal) |
| E-commerce (catalogue) | Oui (avec ISR) |
| Dashboard personnalise | Non (utilisez SSR/SPA) |
| Application temps reel | Non (utilisez SPA + WebSocket) |
| SEO programmatique (10k+ pages) | Oui (Astro, Hugo) |