A contagem regressiva da oferta não poderia se hidratar, então React jogou o banner fora em cada carga

Fixkamo-marketing
Navios
9 de setembro de 2026 às 16:23 UTC
Autor
Kamo
Enviar
c4fb5a8

A homepage tem jogado React # 418 — "o texto renderizado do servidor não corresponde ao cliente" — em cada carga, na produção, bem como localmente. O descompasso é o relógio do banner da oferta: const [time, setTime] = useState() => calcCountdown(novo ************* // lê Date.now() ); Um iniciador preguiçoso que lê o relógio roda duas vezes em dois diferentes relógios: uma vez quando o servidor pré-render a página, uma vez quando o navegador hidrata-a. Aqueles não podem concordar, e com `revalidate = 300` o servido HTML tem até cinco minutos, então eles discordam por minutos. Reagir relatou a caixa de segundos como 25 no servidor e 23 no cliente, então regenerado todo o banner subtree no cliente — que é o real custo, no elemento do herói que está acima da dobra e animador. A semente agora vem do servidor como um suporte, então a primeira renderização do cliente é uma função pura do que cruzou o limite e reproduz o HTML do servidor exatamente; o efeito se move para o próprio relógio do leitor imediatamente após a montagem, antes do primeiro tique do intervalo. Não é a correção do OfferBand, que está ali: começa em null e renderiza Sem relógio até montar. Isso está correto para uma banda mais abaixo na página, mas esta bandeira está acima da dobra e o relógio é um terço da sua largura, Para que um "pop-in" mudasse o herói em todas as cargas. Verificado contra uma construção de produção com o pré-render deliberadamente envelhecido 100 segundos: a semente HTML lido 21 07 41 40, o navegador mostrado 21 07 38 57 — correspondente a um tempo restante calculado independentemente do página — e não houve erros de hidratação no /en, /en/watch, /en/pricing, /en/pricing/offer, /en/ features, /fr ou /en/site-map. `Date.now()` in a o componente servidor não é uma API dinâmica, e a tabela de rotas ainda mostra A página inicial foi pré-renderizada.

Todas as alterações

Como o que vês no transporte?

Cada uma dessas atualizações pousa automaticamente em seu espaço de trabalho. Comece grátis e veja crescer semana após semana.

Começar Livre Para SempreVer Preços