SSG (Static Site Generation)

React 🟡 Mid

Definition

Les pages HTML sont generees au moment du build, pas a la requete. Resultat ultra-rapide puisque le CDN sert des fichiers statiques pre-generes.

Analogie

Comme imprimer des flyers a l'avance : pas besoin de les creer a la demande, ils sont deja prets 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 requete.

Anti-pattern

Utiliser SSG pour du contenu tres dynamique necessitant des rebuilds frequents.

Termes lies

#rendering#interview#performance