react 18+ · JavaScript
A mensagem
Hydration failed because the initial UI does not match what was rendered on the server
O que significa
O HTML que o servidor enviou e o que o navegador produziu no primeiro render são diferentes, então o React não conseguiu ligar um ao outro. Usar new Date() ou Math.random() durante o render, ler localStorage, ou desenhar conforme a largura de window garante duas respostas distintas — e o mesmo vale para marcação que o navegador conserta em silêncio, como um <div> dentro de um <p>. A regra é renderizar na primeira passada exatamente o que o servidor renderizou e mudar depois que useEffect rodar; o custo é que a parte diferente aparece um instante depois e não está no HTML do servidor. O React 19 escreve a mesma situação como "the server rendered HTML didn't match the client" e mostra um diff do que divergiu.
A correção
Não há um comando de uma linha. A explicação diz o que verificar.
- Impresso por
- react 18+
- JavaScript
- 15
Erros de navegador e de Node costumam dizer o que quebrou e não por que o valor ficou assim — você leu undefined, não era uma função, não era JSON — então o lugar de corrigir está acima da linha que estourou, e calar só aquela linha com ?. e valores padrão faz o mesmo problema reaparecer mais longe, numa forma mais difícil de reconhecer.
Como ler uma mensagem de erro
- Leia da primeira linha para baixo. Quanto mais abaixo, mais são as tripas da ferramenta; a causa costuma estar no topo.
- Se há arquivo e número de linha, comece ali — não o quadro superior da pilha, e sim a linha mais alta que nomeie um arquivo seu.
- Pesquise a mensagem literal, mas tire primeiro seus caminhos e nomes de variáveis: é isso que impede a busca de casar.
- A mesma condição é redigida de formas diferentes conforme a versão. Se os resultados não batem, some o número da versão.
- Antes de colar uma correção, veja o que ela descarta. Algumas não dá para desfazer.
Perguntas frequentes
Q. O que significa “Hydration failed because the initial UI does not match what was rendered on the server”?
O HTML que o servidor enviou e o que o navegador produziu no primeiro render são diferentes, então o React não conseguiu ligar um ao outro. Usar new Date() ou Math.random() durante o render, ler localStorage, ou desenhar conforme a largura de window garante duas respostas distintas — e o mesmo vale para marcação que o navegador conserta em silêncio, como um <div> dentro de um <p>. A regra é renderizar na primeira passada exatamente o que o servidor renderizou e mudar depois que useEffect rodar; o custo é que a parte diferente aparece um instante depois e não está no HTML do servidor. O React 19 escreve a mesma situação como "the server rendered HTML didn't match the client" e mostra um diff do que divergiu.
Q. Como corrigir?
Não há comando de uma linha. A explicação acima diz o que verificar.
Q. Qual ferramenta imprime isso?
react 18+. Fica em JavaScript e a mensagem tem 15 palavras.