react 18+ · JavaScript
संदेश
Hydration failed because the initial UI does not match what was rendered on the server
इसका मतलब
server ने जो HTML भेजा और browser ने अपने पहले render में जो बनाया, वे अलग हैं, इसलिए React दोनों को जोड़ नहीं सका। render के भीतर new Date() या Math.random() इस्तेमाल करना, localStorage पढ़ना, या window की चौड़ाई के अनुसार अलग बनाना — इनसे दो अलग उत्तर पक्के हैं; और वही बात उस markup की है जिसे browser चुपचाप सुधार देता है, जैसे <p> के भीतर <div>। नियम है: पहले चरण में ठीक वही render करें जो server ने किया, और बदलाव useEffect चलने के बाद करें; क़ीमत यह कि वह हिस्सा एक क्षण देर से दिखता है और server के HTML में नहीं होता। React 19 इसी स्थिति को "the server rendered HTML didn't match the client" लिखता है और क्या भिन्न था उसका diff भी दिखाता है।
सुधार
इसका एक-लाइन कमांड नहीं है। व्याख्या में लिखा है कि क्या देखना है।
- कौन देता है
- react 18+
- JavaScript
- 15
browser और node की त्रुटियाँ आमतौर पर यही बताती हैं कि क्या टूटा, यह नहीं कि वह मान ऐसा क्यों बना — आपने undefined पढ़ा, वह function नहीं था, वह JSON नहीं था — इसलिए सुधार की जगह उस पंक्ति से ऊपर है जिसने त्रुटि फेंकी, और ?. तथा डिफ़ॉल्ट मानों से केवल उस पंक्ति को चुप कराने पर वही समस्या और दूर जाकर, और कठिन रूप में लौट आती है।
एरर संदेश कैसे पढ़ें
- पहली पंक्ति से पढ़ें। जितना नीचे जाएँगे उतना वह औज़ार के भीतर की बात है; कारण आम तौर पर सबसे ऊपर लिखा होता है।
- फ़ाइल का नाम और पंक्ति संख्या दिखे तो वहीं से शुरू करें — stack का सबसे ऊपरी frame नहीं, बल्कि वह सबसे ऊपरी पंक्ति जिसमें आपकी लिखी फ़ाइल का नाम हो।
- संदेश को जैसा है वैसा खोजें, पर पहले अपने paths और variable नाम हटा दें — वही खोज को अटकाते हैं।
- वही स्थिति औज़ार के हर संस्करण में अलग शब्दों में आती है। नतीजे बेमेल लगें तो संस्करण संख्या भी जोड़ें।
- कोई सुधार चिपकाने से पहले देख लें कि वह क्या फेंक देगा। इनमें कुछ पलटे नहीं जा सकते।
अक्सर पूछे जाने वाले सवाल
Q. “Hydration failed because the initial UI does not match what was rendered on the server” का क्या मतलब है?
server ने जो HTML भेजा और browser ने अपने पहले render में जो बनाया, वे अलग हैं, इसलिए React दोनों को जोड़ नहीं सका। render के भीतर new Date() या Math.random() इस्तेमाल करना, localStorage पढ़ना, या window की चौड़ाई के अनुसार अलग बनाना — इनसे दो अलग उत्तर पक्के हैं; और वही बात उस markup की है जिसे browser चुपचाप सुधार देता है, जैसे <p> के भीतर <div>। नियम है: पहले चरण में ठीक वही render करें जो server ने किया, और बदलाव useEffect चलने के बाद करें; क़ीमत यह कि वह हिस्सा एक क्षण देर से दिखता है और server के HTML में नहीं होता। React 19 इसी स्थिति को "the server rendered HTML didn't match the client" लिखता है और क्या भिन्न था उसका diff भी दिखाता है।
Q. इसे कैसे ठीक करें?
एक-लाइन कमांड नहीं है। ऊपर की व्याख्या में लिखा है कि क्या देखना है।
Q. यह कौन-सा औज़ार देता है?
react 18+। यह JavaScript में आता है, और संदेश 15 शब्दों का है।