HomeCasa Choisir SSR, SSG ou ISR pour chaque route d’une app Next.js
Décidez la stratégie de rendu et de cache de chaque route de votre projet Next.js (statique, ISR, dynamique, streaming ou client) avec un tableau argumenté, du code et la méthode de vérification. Conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Il comprend 4 variables personnalisables et vous pouvez le copier gratuitement en un clic.
Avancé · Texte · En attente de relecture éditoriale
Prompt
Agis comme un architecte spécialisé dans l'App Router de Next.js, la performance web et le SEO technique.
Contexte :
- Projet : {{projet}}
- Routes et fraîcheur des données : {{routes}}
- Hébergement : {{hebergement}}
- Version de Next.js : {{version_next}}
S'il manque une information décisive (routes qui dépendent de la session, fréquence de mise à jour des données, contenu issu d'un CMS avec webhooks), pose-moi la question avant de trancher.
Livrables :
1. Un tableau par route : stratégie (statique au build, statique avec revalidation périodique ou à la demande, dynamique à chaque requête, streaming avec Suspense, chargement côté client), raison, source des données, impact sur le SEO et sur le temps jusqu'au premier octet.
2. Comment invalider le contenu dans chaque cas (revalidation périodique, revalidatePath ou revalidateTag depuis un webhook) et ce qui se passe si la revalidation échoue.
3. Ce qui rend une route dynamique sans le vouloir (cookies, en-têtes, paramètres de recherche, fetch sans cache) et comment isoler la partie personnalisée pour que le reste reste statique.
4. Un court exemple de code pour deux ou trois routes représentatives.
5. Les limites de {{hebergement}} qui influencent la décision (par exemple, l'export statique ne permet pas le rendu à la requête).
6. Comment vérifier : ce qu'affiche la sortie de `next build` pour chaque route et quels en-têtes de cache contrôler en production.
Contraintes :
- Le comportement de cache par défaut a changé selon les versions de Next.js : précise ce que tu supposes pour {{version_next}} et recommande de vérifier la documentation officielle de cette version.
- N'invente pas de métriques de performance ; si tu fais une estimation, signale-la comme telle.
- Privilégie le statique dès que les exigences de fraîcheur le permettent.
Format : tableau principal, courtes sections par thème et liste finale des risques.Comment l'utiliser
- Liste tes vraies routes avec la fréquence de changement de leur contenu et leur dépendance à l’utilisateur. 2. Indique où tu déploies et la version exacte de Next.js. 3. Applique le tableau et valide avec la sortie de next build avant la mise en ligne.
Exemple d'utilisation
Projet : boutique de meubles avec blog · Routes : /, /produits/[slug] (prix modifiés chaque jour), /blog/[slug], /compte (privé) · Hébergement : Vercel · Version : Next.js 15.
Exemple de résultat
Hypothèse : Next.js 15, où fetch n'est plus mis en cache par défaut. Vérifiez la documentation officielle de votre version.
Stratégie par route
| Route | Stratégie | Raison | Invalidation |
|---|---|---|---|
/ | Statique avec revalidation | Change chaque semaine | revalidateTag('accueil') depuis le CMS |
/produits/[slug] | Statique + ISR ; prix et stock dans un bloc Suspense | Le SEO exige un HTML rapide ; le stock change chaque jour | revalidateTag('produit:slug') à chaque mise à jour du stock |
/blog/[slug] | Statique avec generateStaticParams | Change rarement | revalidatePath via le webhook du CMS |
/compte | Dynamique à chaque requête | Privé, par utilisateur ; lit les cookies | Pas de cache |
Ce qui rend une route dynamique par accident
- Lire
cookies()ouheaders()dans un layout partagé : toutes les routes enfants suivent. - Utiliser
searchParamssur la page produit pour un filtre secondaire.
Solution : isoler la partie personnalisée (panier, message d'accueil) dans un composant client ou un bloc Suspense pour que le reste reste statique.
Comment vérifier
Dans la sortie de next build, chaque route est marquée statique (○), SSG (●) ou dynamique (ƒ). Si /produits/[slug] apparaît en ƒ, quelque chose lit les données de la requête…
Informations clés
- Catégorie
- Programmation et développement · Next.js
- Type de résultat
- Texte
- Niveau
- Avancé
- Conçu pour
- ChatGPT, Claude, Gemini et Microsoft Copilot
- Vérifié sur
- En attente de vérification éditoriale
- Variables
- Projet, Routes et fraîcheur des données, Hébergement et Version de Next.js
- Langue
- Français
- Prix
- Gratuit, sans inscription
- Mis à jour
- 07/11/2026
Questions fréquentes
Quelle différence entre SSG et ISR ?
Avec le SSG, la page est générée au build et ne change pas avant le déploiement suivant. Avec l’ISR, elle est servie en statique mais régénérée après un délai ou à la demande, sans redéploiement.
Le rendu serveur est-il toujours meilleur pour le SEO ?
Ce qui compte, c’est que le HTML initial contienne le contenu. Une page statique ou en ISR y parvient aussi bien que le SSR, et elle est souvent plus rapide et moins coûteuse à servir.
Pourquoi une route devient-elle dynamique sans que je le veuille ?
En général parce qu’elle lit des cookies, des en-têtes ou des paramètres de recherche, ou lance un fetch sans cache. Le prompt t’aide à repérer ces appels et à les isoler.
À quoi sert ce prompt ?
Décidez la stratégie de rendu et de cache de chaque route de votre projet Next.js (statique, ISR, dynamique, streaming ou client) avec un tableau argumenté, du code et la méthode de vérification.
Avec quels outils d'IA fonctionne-t-il ?
Il est conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.
Comment personnaliser le prompt ?
Cliquez sur « Personnaliser » et remplissez les variables (Projet, Routes et fraîcheur des données, Hébergement et Version de Next.js). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.
Faut-il de l'expérience pour l'utiliser ?
Il est de niveau avancé : il s'adresse aux personnes expérimentées dans le domaine, capables d'évaluer et d'ajuster le résultat.
Ce prompt est-il gratuit ?
Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.
Puis-je me fier au résultat de l'IA ?
Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.