1.4 KiB
1.4 KiB
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 :
- Serveur : Récupère les données (
prefetchQuery). - Transfert : Sérialise le cache et l'envoie au client (
dehydrate). - Client : Réhydrate le cache et prend le relais pour l'interactivité.
2. Structure de Dossiers Recommandée
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