# This is NOT the Next.js you know This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. # Guide d'Architecture : Approche Hybride Next.js + TanStack Query Ce document définit les standards pour l'intégration de données via l'architecture hybride (Server-Side Prefetching + Client-Side Hydration). ## 1. Vision Globale L'objectif est de supprimer les états de chargement (spinners) au premier chargement tout en conservant la puissance du cache de TanStack Query sur le client. **Flux de données :** 1. **Serveur :** Récupère les données (`prefetchQuery`). 2. **Transfert :** Sérialise le cache et l'envoie au client (`dehydrate`). 3. **Client :** Réhydrate le cache et prend le relais pour l'interactivité. ## 2. Structure de Dossiers Recommandée ```text src/ ├── app/ │ ├── providers.tsx # Configuration du QueryClientProvider │ └── posts/ │ ├── page.tsx # Server Component (Prefetching) │ └── posts-list.tsx # Client Component (Display + Logic) ├── hooks/ │ └── queries/ # Centralisation des query keys et fonctions fetch └── lib/ └── query-client.ts # Configuration singleton du client ```