Quel est le niveau de difficulté et quel outil IA utiliser ?

Ce prompt est de niveau avancé. Il est compatible avec tous les outils IA (ChatGPT, Claude, Gemini, etc.).

💻DeveloppementAvanceAll AIs

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 à <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>.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

Déboguer une erreur d'hydratation mismatch entre le rendu serveur et clientMigrer une page du Pages Router vers l'App Router avec Server ComponentsOptimiser le temps de chargement initial (LCP) d'une page dynamique avec SSR et streamingChoisir entre SSR, SSG et ISR pour chaque route d'un site e-commerce

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'Optimiseur

Commentaires

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.