SSG, ISR ou SSR : choisir le mode de rendu d'une page
Mis à jour le
Le choix du mode de rendu se résume à une question : le contenu est-il le même pour tous les visiteurs, et à quelle fréquence change-t-il ? Identique pour tous et stable : génération statique (SSG). Identique pour tous mais mis à jour régulièrement : régénération incrémentale (ISR). Propre à chaque visiteur ou à chaque requête : rendu côté serveur (SSR).
Trois modes, un même compromis
Les trois modes arbitrent entre la même paire de contraintes : la vitesse de réponse et la fraîcheur du contenu.
- SSG : le HTML est produit au build et servi tel quel depuis le CDN. C'est le plus rapide, mais toute modification demande un nouveau déploiement.
- ISR : la page est statique, avec une durée de validité. Passé ce délai, la première visite reçoit encore l'ancienne version pendant que la nouvelle est régénérée en arrière-plan.
- SSR : le HTML est calculé à chaque requête. Le contenu est toujours frais, au prix d'un temps de réponse qui dépend du serveur et des données.
En pratique avec l'App Router de Next.js
Une route dynamique devient statique dès qu'elle exporte generateStaticParams : la liste des paramètres connus est pré-rendue au build. Ajouter export const revalidate = 86400 la fait passer en ISR, avec une régénération au plus une fois par jour.
dynamicParams = false ferme la porte au reste : un paramètre absent de la liste renvoie directement une 404, sans rendu à la demande. À l'inverse, lire les cookies, les en-têtes ou les paramètres de recherche de la requête fait basculer la route en rendu dynamique.
Les pièges de l'ISR
L'ISR sert du contenu potentiellement périmé pendant toute la durée de validité, puis une dernière fois au moment de la régénération. Pour un prix ou un stock, ce délai est un défaut ; pour un article, il est invisible.
Autre piège : une régénération qui échoue. Tant que le nouveau rendu n'aboutit pas, l'ancienne version continue d'être servie — ce qui est le comportement voulu, mais masque la panne. La source de données d'une page ISR se surveille comme une dépendance de production.
En bref
Quelle différence entre SSG et ISR ?
Une page SSG est générée une seule fois, au build. Une page ISR est générée de la même manière, puis régénérée en arrière-plan après un délai défini, sans nouveau déploiement.
Que fait revalidate dans Next.js ?
Il fixe, en secondes, la durée pendant laquelle une page pré-rendue est considérée comme à jour. Passé ce délai, la visite suivante déclenche sa régénération en arrière-plan.
Quand choisir le rendu côté serveur ?
Lorsque le contenu dépend du visiteur ou de la requête — session, panier, résultats de recherche — et ne peut donc pas être calculé à l'avance ni partagé entre visiteurs.