Uma página está lançando um erro de hydration mismatch em produção. Como você rastreia isso?

Um mismatch significa que o HTML renderizado no servidor não bate com o primeiro render do cliente. As causas de sempre são datas e formatação de locale, valores aleatórios, ler window ou localStorage durante o render, e aninhamento de HTML inválido que o navegador conserta em silêncio. Leia o diff que o React loga para achar o nó, e então mova o valor para um efeito para que o primeiro render bata, ou renderize aquela parte só no cliente.

Primeiro eu leio o erro direito, porque o React 19 te dá um diff decente mostrando qual nó divergiu, e isso normalmente já basta para nomear o culpado. Depois eu passo pelos suspeitos. Qualquer coisa baseada em tempo é a número um, então uma data formatada ou um timestamp relativo renderizado no servidor num segundo e no cliente em outro. Depois formatação de locale e fuso horário, porque o servidor é quase sempre UTC. Depois ids aleatórios ou Math.random num componente. Depois qualquer coisa lendo window, matchMedia ou localStorage durante o render, o que é comum com alternadores de tema. E por fim aninhamento inválido, tipo uma div dentro de um p, onde o navegador conserta o HTML antes de o React ver. O conserto depende de qual for. Para valores que são genuinamente só do cliente eu renderizo um placeholder estável no servidor e defino o valor real num efeito, ou carrego aquele pedaço com lazy load e renderização no servidor desligada. Eu só recorro ao suppressHydrationWarning numa folha isolada como um timestamp, nunca num wrapper.