production में कोई page hydration mismatch फेंक रहा है। आप उसे कैसे ढूंढते हैं?

mismatch का मतलब है कि server पर बना HTML client के पहले render से मेल नहीं खाता। आम वजहें हैं तारीखें और locale की formatting, random values, render के दौरान window या localStorage पढ़ना, और गलत HTML nesting जिसे browser चुपचाप सुधार देता है। React जो diff दर्ज करता है उसे पढ़कर node ढूंढिए, फिर या तो उस value को किसी effect में ले जाइए ताकि पहला render मेल खाए, या उस हिस्से को सिर्फ client पर render कीजिए।

पहले मैं गलती को ठीक से पढ़ता हूं, क्योंकि React 19 आपको एक ठीक ठाक diff देता है जो दिखाता है कि कौन सा node अलग था, और आम तौर पर दोषी का नाम बताने के लिए इतना काफी होता है। फिर मैं संदिग्धों पर चलता हूं। समय से जुड़ी कोई भी चीज नंबर एक है, यानी कोई सजी हुई तारीख या कोई सापेक्ष timestamp जो server पर एक सेकंड पर और client पर दूसरे सेकंड पर बना। फिर locale और time zone की formatting, क्योंकि server लगभग हमेशा UTC होता है। फिर किसी component में random ids या Math.random। फिर render के दौरान window, matchMedia या localStorage पढ़ने वाली कोई भी चीज, जो theme toggles के साथ आम है। और आखिर में गलत nesting, जैसे किसी p के अंदर div, जहां browser React के देखने से पहले ही HTML सुधार देता है। हल इस पर निर्भर है कि कौन सी वजह है। सच में सिर्फ client वाली values के लिए मैं server पर एक स्थिर placeholder render करता हूं और असली value किसी effect में सेट करता हूं, या उस टुकड़े को server rendering बंद करके lazy load करता हूं। मैं suppressHydrationWarning सिर्फ timestamp जैसे किसी अकेले पत्ते पर उठाता हूं, किसी wrapper पर कभी नहीं।