L'offerta conto alla rovescia non poteva idratare, così React ha buttato via il banner su ogni carico

Fixkamo-marketing
Spegnimento
9 settembre 2026 alle ore 16:23 UTC
Autore
Kamo
Impegno
c4fb5a8

La homepage ha lanciato React #418 — "il testo reso dal server non corrispondeva al cliente" — su ogni carico, in produzione e localmente. Il microfono è l'orologio del banner dell'offerta: const [time, setTime] = useState(() => CalcCountdown (nuovo **************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************** ); Un iniziale pigro che legge l'orologio corre due volte su due diversi orologi: una volta che il server prerenders la pagina, una volta quando il browser Lo idrata. Quelli non possono concordare, e con `revalidate = 300` il servito HTML ha fino a cinque minuti, quindi non sono d'accordo per minuti. Reazione ha segnalato la casella di secondi 25 sul server e 23 sul client, quindi rigenerato l'intero subtreo banner sul client — che è l'effettivo costo, sull'unico elemento dell'eroe che è sopra la piega e l'animazione. Il seme viene ora dal server come prop, quindi il primo render client è una pura funzione di ciò che ha attraversato il confine e riproduce il HTML del server esattamente; l'effetto si sposta al proprio orologio del lettore subito dopo il montaggio, prima della prima spunta dell'intervallo. Non la soluzione di OfferBand, che è proprio lì: inizia a null e rende nessun orologio fino al monte. Questo è corretto per una band più in basso, ma questo banner è sopra la piega e l'orologio è un terzo della sua larghezza, così un pop-in avrebbe spostato l'eroe su ogni carico. Verificato contro una costruzione di produzione con il prerender deliberatamente invecchiato 100 secondi: il seme HTML letto 21 07 41 40, il browser mostrato 21 07 38 57 — corrispondente ad un tempo residuo calcolato indipendentemente dal pagina — e non ci sono stati errori di idratazione su /en, /en/watch, /en/pricing, /en/pricing/offer, /en/features, /fr o /en/site-map. `Date.now()` in a componente server non è un API dinamico, e la tabella di percorso mostra ancora la homepage prerendered.

Tutte le modifiche

Come quello che vedi la spedizione?

Ognuno di questi aggiornamenti atterra automaticamente nello spazio di lavoro. Inizia gratis e guardalo crescere settimana dopo settimana.

Inizia gratis per sempreVisualizza il prezzo