Comment concevez-vous la différence entre état serveur et état client dans une application frontend ?

L'état serveur, ce sont des données que vous ne possédez pas : elles vivent dans une base, elles peuvent être périmées dès leur arrivée, et elles ont besoin de cache, de revalidation, de reprises et de déduplication. L'état client, ce sont des données que vous possédez, comme l'onglet ouvert ou ce qui est saisi dans un formulaire, et il est synchrone et toujours correct. Traitez-les différemment : un cache de requêtes pour l'état serveur, un état local de composant ou un petit store pour l'état client.

L'état serveur, c'est une copie en cache de quelque chose que je ne contrôle pas. Il arrive de façon asynchrone, il peut être périmé, deux composants peuvent le vouloir en même temps, et il a besoin de revalidation, de reprises et de déduplication. L'état client est à moi : l'accordéon ouvert, le brouillon dans un formulaire, le filtre sélectionné avant que je l'applique. Il est synchrone et n'est jamais périmé. Une fois que j'ai commencé à les traiter comme deux problèmes différents, beaucoup de code a disparu. Les données serveur vont dans un cache de requêtes clé par leurs paramètres, qui gère les états de chargement et d'erreur, déduplique les requêtes concurrentes et refait la requête au retour du focus. L'état client reste en état local de composant jusqu'à ce que plus d'un composant en ait besoin, et seulement là il passe dans un petit store partagé. Le symptôme de l'erreur est très reconnaissable : un store global plein d'entités, des booléens de chargement écrits à la main sur chaque écran, et un bug où deux composants récupèrent le même utilisateur et ne sont pas d'accord dessus. J'ai maintenu cette application et je ne la reconstruirais pas comme ça.