Gérer un état complexe dans Next.js : Zustand vs Context vs TanStack Query

Quand une application Next.js grandit, la question du state management devient centrale. Entre le state local, le Context API, les librairies dédiées comme Zustand et la gestion des données serveur avec TanStack Query, il est facile de se perdre.

Le bon outil pour la bonne donnée

Ma règle simple : les données venant du serveur appartiennent à TanStack Query (cache, invalidation, revalidation), l'état UI global léger à Zustand, et tout ce qui reste local à un composant ne devrait jamais quitter ce composant.

La meilleure architecture de state est celle que ton équipe comprend en relisant le code trois mois plus tard.

— Principe personnel

Exemple de store Zustand

import { create } from 'zustand';

interface CartStore {
  items: string[];
  addItem: (id: string) => void;
}

export const useCartStore = create<CartStore>((set) => ({
  items: [],
  addItem: (id) =>
    set((state) => ({ items: [...state.items, id] })),
}));

Cette séparation nette a permis à mon équipe de réduire de moitié les bugs liés à la synchronisation d'état sur VTC Control.