[Dúvida] Erro de Hydration com Nuxt · Veecks

Tenho encarado um erro estranho, não encontrei a informação na internet e resolvi perguntar por aqui, estou até pensando se talvez esse comportamento é intencional, se puderem me ajudar vou ficar bastante grato.

O erro ocorrido é o Hydration mismatch em um projeto Nuxt comoletamente novo criado utilizando o nuxi ou vite:

Hydration children mismatch in <div>:
server rendered element contains fewer child nodes than client vdom.

Para a replicação:

Criar projeto Nuxt, instalar dependencias e npm run dev
Entrar na página pelo localhost:3000
Adicionar um elemento qualquer na hierarquia dentro de App.vue
Quando o elemento adicionado aparecer, atualize a página

Em outras palavras, o que acontece é que quando mudamos a estrutura HTML no nosso componente, o cliente atualiza mas o servidor parece não atualizar. (Se o servidor for finalizado e iniciado novamente o problema some até que se mude um elemento da estrutura e atualize a página novamente)

O problema parece afetar apenas o server de desenvolvimento.

Opa tudo bem? Cara esses problemas de hydration sempre acontecem, normalmente por conta de diferenças entre o server e o client, algumas coisas que já me causaram esse problema foi o uso de multiplas tags dentro de um template, especialmente templates de rotas, e para evitar isso deve-se usar uma div como wrapper para tudo isso, como no exemplo abaixo:

| acredito que esse seja o erro no seu caso

<template>
   <div class="wrapper">
      <h2>Home</h2>
      <p>Conteudo da home</p>
   </div>
</template>

Um outro motivo que levou esse erro a acontecer em meus projetos foi o i18n, que por falha minha na hora de definir a lingua que o usuário usa no navegador como lingua padrão do i18n, acabou gerando um desalinhamento entre o conteudo do servidor e o do client, sendo necessário um reload, ou uma validação para identificar se o rendering está no client depois de montado.

Bom esses foram os motivos que lembro de ter acontecido com meus projetos, mas é claro que pode haver outros motivos que desconheço. Uma dica para identificar é marcar com um breakpoint o script que gerou ele no devtool e recarregar a página, após fazer isso o próprio debugger do devtools vai lhe informar mais detalhes.