SSG (Static Site Generation)

React 🟡 Mid

Définition

Les pages HTML sont générées au moment du build, pas a la requête. Résultat ultra-rapide puisque le CDN sert des fichiers statiques pre-générés.

Analogie

Comme imprimer des flyers a l'avance : pas besoin de les créer a la demande, ils sont déjà prêts a distribuer.

Exemple de code

// Next.js - page statique par defaut dans App Router
export default async function Blog() {
  const posts = await getPosts(); // execute au build
  return posts.map(p => <article key={p.id}>{p.title}</article>);
}
// export const dynamic = 'force-static';

Cas d'usage

Blogs, documentation, pages marketing dont le contenu ne change pas a chaque requête.

Anti-pattern

Utiliser SSG pour du contenu très dynamique nécessitant des rebuilds fréquents.

#rendering#interview#performance

En entretien

Quelle différence entre SSG et SSR ?
En SSG, les pages HTML sont générées au moment du build, pas à la requête, donc le CDN sert des fichiers statiques déjà prêts, comme imprimer des flyers à l'avance plutôt que de les créer à la demande. En SSR, c'est le serveur qui génère le HTML à chaque requête.
Quand est-ce que tu éviterais le SSG ?
Pour du contenu très dynamique qui nécessiterait des rebuilds fréquents, ce n'est pas adapté. Le SSG convient plutôt aux blogs, à la documentation ou aux pages marketing dont le contenu ne change pas à chaque requête.

Fiche mise à jour le 2026-09-27