32 lines
1.4 KiB
Markdown
32 lines
1.4 KiB
Markdown
<!-- BEGIN:nextjs-agent-rules -->
|
|
# 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
|
|
```
|
|
<!-- END:nextjs-agent-rules -->
|