प्रस्ताव उलटी गिनती नहीं हो सकती है, इसलिए रीएक्ट ने बैनर को हर लोड पर फेंक दिया

शिप

9 सितंबर 2026 को 4:23 pm बजे UTC

लेखक

Kamo

Commit

c4fb5a8

होमपेज React #418 फेंक दिया गया है - "सर्वर ने पाठ प्रस्तुत किया ग्राहक से मेल नहीं खाता था - हर भार पर, उत्पादन के साथ-साथ स्थानीय रूप से। गलतफहमी प्रस्ताव बैनर की घड़ी है: const [time, setTime] = useState() => CalcCountdown (new ************* // read Date.now) ); एक आलसी प्रारंभिक जिसने घड़ी को दो बार दो अलग तरीके से पढ़ा घड़ी: एक बार जब सर्वर पेज को प्रीरेंडर करता है, एक बार जब ब्राउज़र इसे हाइड्रेट करें। वे सहमत नहीं हैं, और `revalidate = 300` के साथ सेवा की गई एचटीएमएल पांच मिनट तक पुराना है, इसलिए वे मिनटों से असहमत हैं। प्रतिक्रिया ग्राहक पर सर्वर और 23 पर सेकंड बॉक्स को 25 के रूप में सूचित किया, फिर क्लाइंट पर पूरे बैनर subtree को फिर से उत्पन्न किया - जो वास्तविक है लागत, नायक के एक तत्व पर जो गुना से ऊपर है और एनिमेशन से ऊपर है। बीज अब सर्वर से एक प्रोप के रूप में आता है, इसलिए पहला क्लाइंट प्रस्तुत करता है यह एक शुद्ध कार्य है जो सीमा को पार करता है और प्रजनन करता है वास्तव में सर्वर HTML; प्रभाव पाठक की अपनी घड़ी में चल रहा है माउंट के तुरंत बाद, अंतराल के पहले टिक से पहले। नहीं प्रस्तावबैंड का निर्धारण, जो वहाँ सही है: यह शून्य पर शुरू होता है और प्रस्तुत करता है माउंट तक कोई घड़ी नहीं। यह पृष्ठ नीचे एक बैंड के लिए सही है, लेकिन यह बैनर गुना से ऊपर है और घड़ी इसकी चौड़ाई का तीसरा है, इसलिए पॉप-इन हर लोड पर हीरो को शिफ्ट करेगा। पूर्ववर्ती जानबूझकर वृद्ध के साथ एक उत्पादन निर्माण के खिलाफ सत्यापित 100 सेकंड: एचटीएमएल बीज ने 21 07 41 40 पढ़ा, ब्राउज़र ने दिखाया 21 07 38 57 - शेष समय का मिलान स्वतंत्र रूप से किया गया पृष्ठ - और /en, /en /watch, /en/pricing पर कोई हाइड्रेशन त्रुटियां नहीं थीं, /en/pricing/offer, /en/features,/fr या/en/site-map. `Date.now()' in a one सर्वर घटक एक गतिशील एपीआई नहीं है, और रूट टेबल अभी भी दिखाता है होमपेज प्रस्तुत किया गया।.