Une page lève une erreur de non-concordance d'hydratation en production. Comment la traquez-vous ?

Une non-concordance signifie que le HTML rendu sur le serveur ne correspond pas au premier rendu client. Les causes habituelles sont les dates et le formatage lié à la locale, les valeurs aléatoires, la lecture de window ou localStorage pendant le rendu, et l'imbrication HTML invalide que le navigateur répare en silence. Lisez la différence que React journalise pour trouver le nœud, puis soit déplacez la valeur dans un effet pour que le premier rendu corresponde, soit rendez cette partie uniquement côté client.

D'abord je lis correctement l'erreur, parce que React 19 vous donne une différence correcte montrant quel nœud diverge, et ça suffit en général à nommer le coupable. Ensuite je passe les suspects en revue. Tout ce qui touche au temps arrive en tête, donc une date formatée ou un horodatage relatif rendu sur le serveur à une seconde et sur le client à une autre. Puis le formatage de locale et de fuseau, parce que le serveur est presque toujours en UTC. Puis les identifiants aléatoires ou Math.random dans un composant. Puis tout ce qui lit window, matchMedia ou localStorage pendant le rendu, ce qui est courant avec les bascules de thème. Et enfin l'imbrication invalide, comme un div dans un p, où le navigateur corrige le HTML avant que React ne le voie. Le correctif dépend du cas. Pour les valeurs vraiment côté client, je rends un espace réservé stable sur le serveur et je pose la vraie valeur dans un effet, ou je charge ce morceau en lazy avec le rendu serveur désactivé. Je ne sors suppressHydrationWarning que sur une feuille isolée comme un horodatage, jamais sur un conteneur.