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
Ce prompt est conçu pour obtenir une analyse complète de votre architecture de rendu Next.js. En précisant votre version de Next.js et le type de routeur utilisé, l'IA adapte ses recommandations aux API disponibles (App Router avec Server Components ou Pages Router avec getServerSideProps/getStaticProps). La section diagnostic est particulièrement utile pour résoudre les erreurs d'hydratation, l'un des problèmes les plus fréquents en SSR. L'IA identifie les causes courantes : accès à window 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 dynamic() avec ssr: false ou des patterns avec useEffect. Pour tirer le meilleur parti de ce prompt, décrivez précisément votre problème ou objectif : 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.
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
Générer des mocks et fixtures pour vos tests automatisés
Un prompt pour générer automatiquement des mocks, stubs et fixtures de données réalistes adaptés à votre framework de test et vos cas d'usage.
Prompt Midjourney pour créer un prototype
La création de prototypes est une étape cruciale dans tout processus de conception, qu'il s'agisse de design produit, d'interfaces numériques ou d'objets physiques. Traditionnellement, cette phase nécessite des compétences en modélisation 3D, en design industriel ou en maquettage — des compétences techniques qui peuvent ralentir considérablement les équipes créatives. Midjourney bouleverse cette approche en permettant de générer des visuels photoréalistes de prototypes en quelques secondes. Grâce à des prompts bien construits, vous pouvez explorer des dizaines de directions créatives, tester différents matériaux, formes et finitions, et présenter des concepts convaincants à vos clients ou investisseurs sans passer par un logiciel de CAO. Que vous soyez designer produit cherchant à valider rapidement une idée, entrepreneur préparant un pitch deck, ou équipe UX souhaitant visualiser un concept d'interface sur un device physique, Midjourney vous offre un terrain d'expérimentation visuelle sans précédent. L'enjeu principal réside dans la formulation du prompt : il faut guider l'IA vers un rendu qui ressemble à un véritable prototype industriel, avec les bons matériaux, l'éclairage de studio approprié et le niveau de détail attendu par des professionnels.
Rédiger un chart Helm
Empaqueter des applications sous forme de charts Helm
Rédiger un template CloudFormation
Rédiger des templates CloudFormation