No outro dia, eu encontrei um problema. O código gerado pelo servidor se recusou a se hidratar no Safari.
Hidratação refere-se a um processo do lado do cliente durante o qual o Vue pega o HTML estático enviado pelo servidor e o transforma em um DOM dinâmico que pode responder a alterações de dados no lado do cliente. Mais detalhes aqui .
"Prod" caiu, e a versão dev relatou que havia discrepâncias no dom. E como a versão dev não falha ao tentar se hidratar, mas apenas a reporta no console, o erro não era óbvio e, enquanto o encontramos, já passou um bom tempo.
Uma estratégia muito interessante da Vue é esperar a produção e cair lá!
Mil e quinhentos componentes de complexidade variada não simplificaram a tarefa. Como resultado, consegui ver o problema, encontrar um dispositivo adequado e fazer amizade com o console do desenvolvedor.
Como resultado, verificou-se que nosso aplicativo falha quando o componente de rodapé está conectado. E quando encontraram a linha certa, simplesmente não acreditaram em seus olhos. Esperava tudo, menos isso.
Verificou-se que, quando você exclui o número de telefone, a hidratação ocorre sem problemas. Quando eles começaram a cavar, descobriu-se que o Safari, depois de receber o layout html, substituiu uma etiqueta ao lado do telefone, o que causou, de fato, o discador.
Naturalmente, quando a hidratação começou, o domínio da página que veio do servidor e o recém-criado virtual não correspondeu. O aplicativo travou sem declarar guerra.
Esse problema também foi resolvido inesperadamente. Até agora, inserimos o telefone da maneira usual:
<div>8 (800) 111 2 333</div>
A solução foi a ligação de texto v:
<div v-text=”8 (800) 111 2 333”></div>
Eu tenho uma teoria sobre isso. Se alguém puder confirmar ou refutá-lo (sugerindo um novo), ficarei muito agradecido. Pelo que entendi, depois que o Safari recebeu o documento, o Vue constrói um domínio virtual e o compara com este documento. Enquanto ele hidrata esse documento, o Safari faz seu trabalho sombrio e muda o telefone para um link. Quando se trata desse campo, o Vue com texto v substitui novamente o conteúdo de nossa div pelo que precisamos. Como resultado, no momento da comparação, os doms coincidem, o voo é normal.