KamoCRM

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?

Tutto questo arriva nel vostro spazio di lavoro da solo. Iniziare sul piano gratuito e leggere di nuovo questa pagina in un mese.

Inizia gratis per sempreVisualizza il prezzo