Prompt pour maîtriser le SSR et l'hydratation avec Next.js
Prompt complet pour diagnostiquer, implémenter et optimiser le Server-Side Rendering et l'hydratation dans une application Next.js, avec gestion des erreurs courantes.
Coller dans votre IA
Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.
Tu es un expert Next.js spécialisé en Server-Side Rendering et hydratation. Mon projet utilise [VERSION_NEXTJS] avec le [APP_ROUTER|PAGES_ROUTER]. Voici mon contexte :
- Page concernée : [DESCRIPTION_PAGE]
- Problème ou objectif : [PROBLEME_OU_OBJECTIF]
- Stack technique : [STACK_TECHNIQUE]
Analyse ma situation et fournis-moi :
-
Diagnostic SSR/Hydratation : Identifie les erreurs potentielles d'hydratation (mismatch client/serveur), les composants qui ne devraient pas être rendus côté serveur, et les accès incorrects à des API navigateur (window, document, localStorage).
-
Architecture de rendu optimale : Propose la stratégie de rendu adaptée pour chaque composant de ma page (Server Component, Client Component, SSR, SSG, ISR) en justifiant chaque choix. Indique clairement où placer les directives 'use client' et 'use server'.
-
Code corrigé/optimisé : Réécris le code concerné avec les bonnes pratiques :
- Séparation claire des Server et Client Components
- Gestion correcte du hydration mismatch (useEffect, dynamic imports avec ssr: false, Suspense boundaries)
- Streaming SSR avec loading.tsx si pertinent
- Gestion du cache et revalidation (revalidatePath, revalidateTag)
-
Data fetching : Recommande le pattern de récupération de données adapté (fetch dans Server Components, Route Handlers, Server Actions) avec gestion d'erreurs et loading states.
-
Performance : Mesure l'impact sur les Core Web Vitals (LCP, FID, CLS) et propose des optimisations concrètes (lazy loading, prefetch, parallel data fetching).
-
Tests : Fournis un exemple de test vérifiant que le SSR produit le HTML attendu et que l'hydratation se déroule sans erreur.
Formate ta réponse avec du code TypeScript commenté et des explications claires pour chaque décision.
Personnaliser ce prompt avec Léa
Léa réécrit ce prompt pour ton métier et ton objectif précis — 3 questions suffisent.
Pourquoi ce prompt fonctionne
<p>Ce prompt est conçu pour obtenir une analyse complète de votre architecture de rendu Next.js. En précisant votre <strong>version de Next.js</strong> et le <strong>type de routeur</strong> utilisé, l'IA adapte ses recommandations aux API disponibles (App Router avec Server Components ou Pages Router avec getServerSideProps/getStaticProps).</p><p>La section diagnostic est particulièrement utile pour résoudre les <strong>erreurs d'hydratation</strong>, l'un des problèmes les plus fréquents en SSR. L'IA identifie les causes courantes : accès à <code>window</code> côté serveur, rendu conditionnel basé sur l'état client, ou utilisation de librairies incompatibles avec le SSR. Elle propose ensuite des solutions concrètes comme <code>dynamic()</code> avec <code>ssr: false</code> ou des patterns avec <code>useEffect</code>.</p><p>Pour tirer le meilleur parti de ce prompt, décrivez précisément votre <strong>problème ou objectif</strong> : s'agit-il d'un bug d'hydratation à corriger, d'une migration vers l'App Router, ou d'une optimisation des performances ? Plus le contexte est riche, plus les recommandations seront pertinentes et directement applicables à votre code.</p>
Cas d'usage
Résultat attendu
Une analyse structurée avec diagnostic des problèmes SSR/hydratation, architecture de composants recommandée (Server vs Client), code TypeScript corrigé et commenté, stratégie de data fetching, recommandations de performance et exemples de tests.
Améliorez ce prompt
Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.
Améliore ce prompt avec l'OptimiseurCommentaires
- LéaIA
Pour des erreurs d’hydratation, ajoutez une variable `mounted` dans un `useEffect` et ne rendez le contenu client qu’après montage. Pour isoler un composant non-SSR, privilégiez `next/dynamic` avec `ssr:false` plutôt que de désactiver le SSR globalement. Pensez à tester aussi avec `next build` en production.
Termes du glossaire
📬 Recevez de nouveaux prompts chaque semaine
Rejoignez notre newsletter et ne manquez aucun prompt.
Pour aller plus loin
Prompts similaires
Optimisation des coûts cloud Kubernetes
Réduire les coûts Kubernetes
Tests de smoke post-déploiement
Valider automatiquement un déploiement
Prompt ChatGPT pour créer des tests E2E
Les tests end-to-end (E2E) sont essentiels pour garantir le bon fonctionnement d'une application dans son ensemble, mais leur rédaction est souvent chronophage et répétitive. ChatGPT peut considérablement accélérer ce processus en générant des scénarios de test complets, couvrant les parcours utilisateurs critiques, les cas limites et les assertions nécessaires. Que vous utilisiez Cypress, Playwright, Selenium ou tout autre framework, l'IA peut produire des tests structurés et maintenables à partir d'une simple description fonctionnelle. L'enjeu est de fournir un prompt suffisamment précis pour obtenir des tests réalistes, qui respectent les bonnes pratiques (sélecteurs stables, gestion de l'asynchrone, isolation des tests) et s'intègrent directement dans votre pipeline CI/CD. Dans ce guide, vous trouverez un prompt principal optimisé ainsi que des variantes adaptées à votre niveau d'expertise, pour transformer vos spécifications fonctionnelles en suites de tests E2E robustes en quelques secondes.
Implémentation des déploiements canari
Déployer des changements en toute sécurité avec un canari