"हाइड्रेशन विफल रहा क्योंकि सर्वर-रेंडर HTML क्लाइंट से मेल नहीं खाता..."

यदि आप एप्लिकेशन बनाने के लिए Next.js का उपयोग कर रहे हैं, तो आपको उपरोक्त त्रुटि या कुछ इसी तरह की त्रुटि मिली होगी। इसे हाइड्रेशन एरर कहते हैं.

जब मैंने पहली बार नेक्स्ट.जेएस शुरू किया था तो मुझे यह त्रुटि मिलती थी, लेकिन मुझे नहीं पता था कि क्या करना है और मैंने इसे देखने की कभी परवाह नहीं की क्योंकि यह वास्तव में उस समय मेरे कोड को प्रभावित नहीं कर रहा था। तब तक नहीं जब तक एक साक्षात्कारकर्ता ने मुझसे यह नहीं पूछा कि नेक्स्ट.जेएस में हाइड्रेशन त्रुटि को हल करने के लिए मैं क्या करूंगा। मैं हक्का-बक्का रह गया क्योंकि अब यह साक्षात्कारकर्ता द्वारा मुझे नीचा दिखाने की कोशिश का मामला नहीं था, बल्कि लापरवाही और सरासर अज्ञानता का मामला था। मैं नहीं चाहता कि आप अपने अगले साक्षात्कार में मेरे जैसे बनें। तो आइये हाइड्रेशन पर चर्चा करते हैं।

हाइड्रेशन वह प्रक्रिया है जहां स्थिर HTML में जावास्क्रिप्ट जोड़कर इंटरैक्टिव बन जाता है। इसलिए आम तौर पर जब कोई वेबपेज सर्वर पर रेंडर किया जाता है, तो क्लाइंट तक पहुंचने से पहले यह अपनी इंटरैक्टिविटी और इवेंट हैंडलर खो देता है। रिएक्ट क्लाइंट पर कंपोनेंट ट्री बनाने के लिए जिम्मेदार है। इसे हाइड्रेशन कहा जाता है, क्योंकि यह अन्तरक्रियाशीलता और ईवेंट हैंडलर जोड़ता है जो HTML सर्वर-साइड रेंडर होने पर खो गए थे। रिएक्ट इसकी तुलना वास्तविक सर्वर-साइड रेंडर किए गए DOM से करता है। वे समान होने चाहिए ताकि रिएक्ट इसे अपना सके।

यदि हमारे पास मौजूद पेज और क्लाइंट-पक्ष जो सोचता है कि हमारे पास होना चाहिए, के बीच कोई मेल नहीं है, तो हमें "हाइड्रेशन त्रुटि" मिलती है। कुछ सामान्य हाइड्रेशन त्रुटि कारणों में शामिल हैं: गलत HTML तत्व नेस्टिंग, रेंडरिंग के लिए उपयोग किया जाने वाला अलग-अलग डेटा, केवल-ब्राउज़र एपीआई का उपयोग, साइड इफेक्ट्स, आदि।

कारण जो भी हो, आपको प्राप्त त्रुटि संदेश को पढ़कर इसका पता लगाना होगा। संभावित समाधानों में शामिल हैं;

1. केवल क्लाइंट पर चलाने के लिए यूज़इफ़ेक्ट का उपयोग करना।
हाइड्रेशन बेमेल को रोकने के लिए, सुनिश्चित करें कि घटक सर्वर-साइड पर वही सामग्री प्रस्तुत करता है जैसा वह प्रारंभिक क्लाइंट-साइड रेंडर पर करता है। आप जानबूझकर क्लाइंट पर सामग्री प्रस्तुत करने के लिए यूज़इफ़ेक्ट हुक का उपयोग कर सकते हैं। नीचे उदाहरण देखें:

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return 
{isClient ? 'This is never prerendered' : 'Prerendered'}
}

2. विशिष्ट घटकों पर सर्वर-साइड रेंडरिंग अक्षम करना।
आप विशिष्ट घटकों पर Next.js पर अक्षम प्रीरेंडरिंग सुविधा का उपयोग कर सकते हैं। इससे हाइड्रेशन बेमेल को रोका जा सकता है। नीचे उदाहरण देखें:

import dynamic from 'next/dynamic'

const NoSSR = dynamic(() => import('../components/no-ssr'), { ssr: false })

export default function Page() {
  return (
    

      
  )
}

3. सप्रेस हाइड्रेशन चेतावनी का उपयोग करना
ऐसे समय होते हैं जब सर्वर और क्लाइंट पर सामग्री अनिवार्य रूप से भिन्न होगी, टाइमस्टैम्प जैसे उदाहरण। आप जो कर सकते हैं वह तत्व में सप्रेसहाइड्रेशनवार्निंग={true} जोड़कर हाइड्रेशन बेमेल चेतावनी को शांत करना है।

तो इन तीन तरीकों से, आप अगली बार Next.js पर निर्माण करते समय उस हाइड्रेशन त्रुटि को हल करने में सक्षम होंगे।

प्रोग्रामिंग पर अधिक आंखें खोलने वाली सामग्री प्राप्त करने के लिए मेरे पेज की सदस्यता लेना न भूलें।