चयनात्मक हाइड्रेशन के साथ क्रमिक हाइड्रेशन

चयनात्मक हाइड्रेशन रिएक्ट 18 की ऐसी सुविधा है जो रिएक्ट को पूरे पृष्ठ का JavaScript डाउनलोड होने की प्रतीक्षा किए बिना, JavaScript कोड आते ही घटकों का हाइड्रेशन शुरू करने देती है। कोड-विभाजित प्रत्येक स्वतंत्र खंड अपने बंडल के लोड होते ही हाइड्रेट होता है, सभी खंड एक साथ नहीं।

रिएक्ट 18 से पहले, हाइड्रेशन “सब या कुछ भी नहीं” था—रिएक्ट को पूरे JavaScript को डाउनलोड करके पूरे वृक्ष को हाइड्रेट करना पड़ता था, तभी पृष्ठ का कोई भी भाग इंटरैक्टिव बनता था। रिएक्ट 18 इस सीमा को हटा देता है: वृक्ष के हिस्से अपने कोड और डेटा के उपलब्ध होते ही स्वतंत्र रूप से हाइड्रेट होते हैं।

यदि उपयोगकर्ता ऐसी सस्पेंस सीमा पर क्लिक करता है या उसके साथ सहभागिता करता है जिसका हाइड्रेशन अभी नहीं हुआ है, तो रिएक्ट किसी भी अन्य लंबित हाइड्रेशन कार्य से पहले उस उपवृक्ष के हाइड्रेशन को तुरंत प्राथमिकता देता है। इसका अर्थ है कि उपयोगकर्ता जिस चीज़ का उपयोग करना चाहता है, वह सबसे पहले इंटरैक्टिव बनती है, चाहे वह दस्तावेज़ के क्रम में कहीं भी हो।

React.lazy को डायनेमिक आयातों और सस्पेंस सीमाओं के साथ मिलाने से कोड-विभाजित घटकों के लिए चयनात्मक हाइड्रेशन संभव होता है। ब्राउज़र पहले मुख्य JS बंडल डाउनलोड करता है और शेल को तुरंत हाइड्रेट करता है। प्रत्येक आवश्यकता पर लोड होने वाला घटक अपना खंड डाउनलोड होते ही हाइड्रेट होता है—जैसे-जैसे ब्राउज़र उन्हें प्राप्त करता है।

नतीजा यह है कि स्क्रीन के ऊपरी भाग की सामग्री नीचे वाले भाग के JavaScript को डाउनलोड किए जाने से पहले इंटरैक्टिव हो जाती है। उपयोगकर्ता नेविगेशन और प्रमुख खंड के CTA के साथ तब भी सहभागिता कर सकता है जब टिप्पणी फ़ीड और सिफारिश विजेट अपने JavaScript खंड लोड कर रहे हों।

चयनात्मक हाइड्रेशन कुल अवरोधन समय (TBT) घटाता है—हाइड्रेशन प्रदर्शन का मुख्य मापदंड। क्रोम DevTools के Performance टैब में 50ms से अधिक समय लेने वाले लंबे कार्य लाल रंग में उभारे जाते हैं। चयनात्मक हाइड्रेशन से पहले, आपको पूरे हाइड्रेशन के लिए 300ms का एक लंबा कार्य दिखाई दे सकता है; इसके बाद, आपको समय के साथ अंतराल पर चलने वाले कई छोटे कार्य दिखाई देते हैं।

वह प्रतिरूप-विरोधी तरीका जो चयनात्मक हाइड्रेशन को कमजोर करता है, आपके ऐप के शीर्ष पर सभी घटकों का आयात करना है: import Footer from './Footer'। यह ब्राउज़र को किसी भी हाइड्रेशन के शुरू होने से पहले Footer का कोड डाउनलोड, पार्स और निष्पादित करने के लिए बाध्य करता है। नीचे वाले भाग के घटकों के शीर्ष-स्तरीय आयातों को React.lazy + गतिशील आयातों से बदलें।

प्रारंभिक दृश्य के नीचे दिखाई देने वाले घटकों के लिए const Footer = React.lazy(() => import('./Footer')) का उपयोग करें। उन्हें एक सरल वैकल्पिक दृश्य वाले सस्पेंस में लपेटें। ब्राउज़र ऊपर दिखाई देने वाले भाग का हाइड्रेशन पूरा होने तक Footer का बंडल प्राप्त करने को कम प्राथमिकता देता है, जिससे स्वाभाविक रूप से TBT बेहतर होता है।

स्ट्रीमिंग और चयनात्मक हाइड्रेशन एक-दूसरे के पूरक हैं: स्ट्रीमिंग FCP और LCP सुधारने के लिए HTML खंड भेजती है, जबकि चयनात्मक हाइड्रेशन TTI और TBT सुधारने के लिए JavaScript खंडों को संसाधित करता है। मिलकर वे प्रदर्शन के “सामग्री जल्दी दिखाएँ” और “इसे जल्दी इंटरैक्टिव बनाएँ” दोनों आयामों को संबोधित करते हैं।

रिएक्ट सर्वर घटक चयनात्मक हाइड्रेशन को और आगे ले जाते हैं: सर्वर घटक क्लाइंट के लिए बिल्कुल भी JavaScript उत्पन्न नहीं करते। केवल “use client” से चिह्नित क्लाइंट घटकों को हाइड्रेट करना पड़ता है। इससे हाइड्रेट किए जाने वाले JavaScript की कुल मात्रा घटती है और चयनात्मक हाइड्रेशन और भी प्रभावी बनता है।

एक व्यावहारिक प्रतिरूप: स्ट्रीमिंग HTML के लिए renderToPipeableStream का उपयोग करें, हाइड्रेशन मोड सक्षम करने के लिए पृष्ठ को एक रूट hydrateRoot कॉल में लपेटें (createRoot के बजाय), नीचे वाले सभी खंडों के लिए React.lazy का उपयोग करें और प्रत्येक खंड को सस्पेंस सीमा में लपेटें। बाकी काम रिएक्ट अपने आप संभाल लेता है।

चयनात्मक हाइड्रेशन रिएक्ट को पूरे बंडल की प्रतीक्षा करने के बजाय JavaScript आते ही घटक उपवृक्षों को क्रमशः हाइड्रेट करने देता है। उपयोगकर्ता की सहभागिताएँ लक्षित उपवृक्ष के हाइड्रेशन को प्राथमिकता देती हैं। नीचे वाले भाग की सामग्री के लिए React.lazy और गतिशील आयातों को सस्पेंस सीमाओं के साथ मिलाने पर यह क्रमिक प्रतिरूप संभव होता है। चयनात्मक हाइड्रेशन और स्ट्रीमिंग SSR एक-दूसरे के पूरक तकनीकें हैं, जो मिलकर सामग्री पहुँचाने और इंटरैक्टिव प्रदर्शन दोनों को बेहतर बनाती हैं।