Définition
SSG (Static Site Génération) 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 sécurisée pour les sites dont le contenu ne change pas à chaque requête.
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)
- Sécurité : pas de serveur, pas de base de données exposee, pas d'injection SQL
- Coût : hébergement quasi-gratuit (Cloudflare Pages, Vercel, Netlify)
- SEO : HTML complet des la première requête
- Fiabilité : pas de panne serveur (fichiers statiques)
Inconvénients
- Build time : peut devenir long pour les gros sites (10k+ pages)
- Données statiques : le contenu n'est mis à jour qu'au rebuild
- Personnalisation : pas de contenu dynamique par utilisateur (sans JS client)
Frameworks SSG
| Framework | Langage | Particularite |
|---|---|---|
| Astro | Multi-framework | Islands, zéro JS par défaut, idéal pour le contenu |
| Next.js | React | SSG + SSR + ISR, le plus polyvalent |
| Hugo | Go | Ultra-rapide (1ms/page), idéal pour les blogs |
| Gatsby | React | GraphQL data layer, plugins |
| 11ty | JS | Simple, flexible, zéro config |
| SvelteKit | Svelte | SSG + SSR, performant |
ISR : le meilleur des deux mondes
L'ISR (Incremental Static Régénération) combine SSG et SSR :
- Les pages sont generees statiquement au build
- Après un TTL, la page est regeneree en arriere-plan à la prochaine visite
- L'utilisateur voit toujours une page statique (rapide) avec des données quasi-fraiches
Quand utiliser SSG ?
| Cas d'usage | SSG adapte ? |
|---|---|
| Blog, documentation | Oui (idéal) |
| Site vitrine, landing pages | Oui (idéal) |
| E-commerce (catalogue) | Oui (avec ISR) |
| Dashboard personnalise | Non (utilisez SSR/SPA) |
| Application temps réel | Non (utilisez SPA + WebSocket) |
| SEO programmatique (10k+ pages) | Oui (Astro, Hugo) |