Prompt to Master SSR and Hydration with Next.js

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 :

1. 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).

2. 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'.

3. 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)

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

5. Performance : Mesure l'impact sur les Core Web Vitals (LCP, FID, CLS) et propose des optimisations concrètes (lazy loading, prefetch, parallel data fetching).

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