Vue Academy · पाठ

स्थगित हाइड्रेशन रणनीतियाँ

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — Nuxt लेज़ी हाइड्रेशन

पाठ 4, कुल 4 में से13 चरण

स्थगित हाइड्रेशन रणनीतियाँ, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

हाइड्रेशन की लागत की समस्या

SSR देखने के लिए तैयार HTML भेजता है, लेकिन इंटरैक्टिव बनाने के लिए क्लाइंट को अभी भी हर कंपोनेंट को हाइड्रेट करना पड़ता है। शुरुआत में सब कुछ हाइड्रेट करने से मुख्य थ्रेड रुकता है और इंटरैक्शन में देरी होती है (TTI)।

स्थगित (आवश्यकता पर होने वाला) हाइड्रेशन कंपोनेंट की हाइड्रेशन प्रक्रिया को तब तक टालता है, जब तक वास्तव में उसकी ज़रूरत न हो।

Nuxt ऑटो-लेज़ी प्रीफ़िक्स

नक्स्ट में किसी कंपोनेंट के आगे Lazy लगाने से वह आवश्यकता पड़ने पर आयात किया जाता है। हाइड्रेशन रणनीतियों के साथ मिलकर यह JS डाउनलोड और हाइड्रेशन दोनों कार्यों को टाल देता है।

<template>
  <!-- Nuxt resolves LazyMyComponent automatically -->
  <LazyMyComponent />
</template>

hydrateOnVisible

hydrateOnVisible किसी कंपोनेंट को तभी हाइड्रेट करता है, जब वह स्क्रॉल करके व्यूपोर्ट में आता है। इसके लिए पर्दे के पीछे IntersectionObserver का उपयोग होता है। यह स्क्रीन के नीचे वाले अनुभागों के लिए बिल्कुल उपयुक्त है।

<template>
  <!-- Nuxt syntax: hydrate when visible -->
  <LazyProductReviews hydrate-on-visible />
</template>

<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->

hydrateOnVisible के साथ मार्जिन

आप IntersectionObserver के विकल्प दे सकते हैं, ताकि तत्व दिखाई देने से कुछ समय पहले हाइड्रेशन शुरू हो जाए और अनुभव सहज रहे।

<template>
  <!-- start hydrating 100px before entering viewport -->
  <LazyComments
    :hydrate-on-visible="{ rootMargin: '100px' }"
  />
</template>

hydrateOnIdle

hydrateOnIdle हाइड्रेशन करने से पहले ब्राउज़र के निष्क्रिय होने की प्रतीक्षा करता है (इसके लिए requestIdleCallback का उपयोग होता है)। इसका उपयोग ऐसे गैर-महत्वपूर्ण विजेट के लिए करें, जिन्हें प्रारंभिक इंटरैक्शन के साथ प्रतिस्पर्धा नहीं करनी चाहिए।

<template>
  <!-- hydrate during idle time -->
  <LazyNewsletterSignup hydrate-on-idle />

  <!-- optional max timeout in ms -->
  <LazyChatBubble :hydrate-on-idle="3000" />
</template>

hydrateOnInteraction

hydrateOnInteraction तब तक हाइड्रेशन टालता है, जब तक तत्व पर निर्दिष्ट DOM इवेंट सक्रिय न हो जाए (क्लिक, फ़ोकस, माउस-ओवर)। उपयोगकर्ता के सक्रिय होने तक कंपोनेंट स्थिर HTML बना रहता है।

<template>
  <!-- hydrate only on click -->
  <LazyDropdownMenu hydrate-on-interaction="click" />

  <!-- multiple events -->
  <LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>

hydrateOnMediaQuery

hydrateOnMediaQuery तभी हाइड्रेट करता है, जब कोई मीडिया क्वेरी मेल खाती हो — उदाहरण के लिए, केवल डेस्कटॉप पर दिखने वाले साइडबार को हाइड्रेट करना, जो मोबाइल पर छिपा रहता है। इससे छोटी स्क्रीन पर अनावश्यक कार्य से बचा जाता है।

<template>
  <!-- only hydrate on wide screens -->
  <LazyDesktopSidebar
    hydrate-on-media-query="(min-width: 1024px)"
  />
</template>

व्यू का मुख्य एपीआई: हाइड्रेशन सहायक

नक्स्ट के बाहर भी यही रणनीतियाँ defineAsyncComponent के hydrate विकल्प में दिए जाने वाले हाइड्रेशन सहायकों के रूप में मौजूद हैं। नक्स्ट के प्रीफ़िक्स इनके ऊपर बना सरल आवरण हैं।

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const LazyChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  hydrate: hydrateOnVisible()
})

सही रणनीति चुनना

रणनीति को उसके उद्देश्य के अनुसार चुनें:

दृश्य — स्क्रीन के नीचे वाली सामग्री (समीक्षाएँ, फ़ुटर)
निष्क्रिय समय — पृष्ठभूमि में चलने वाले विजेट (विश्लेषण, न्यूज़लेटर)
इंटरैक्शन — उपयोगकर्ता की कार्रवाई से दिखने वाला इंटरफ़ेस (मेनू, मॉडल)
मीडिया क्वेरी — डिवाइस-विशिष्ट इंटरफ़ेस

ध्यान रखने योग्य समझौते

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

आइलैंड संरचना के साथ संयोजन

विलंबित हाइड्रेशन, आइलैंड संरचना के साथ अच्छी तरह काम करता है: पृष्ठ का अधिकांश भाग सर्वर से रेंडर किया गया स्थिर HTML होता है, और केवल इंटरैक्टिव आइलैंड ही रणनीति के अनुसार आवश्यकता पड़ने पर हाइड्रेट होते हैं। परिणामस्वरूप client JS न्यूनतम रहता है और जहाँ ज़रूरी है वहाँ तेज़ अंतःक्रियाशीलता मिलती है।

<template>
  <StaticArticle />            <!-- never hydrates -->
  <LazyCommentBox hydrate-on-visible />
  <LazyLikeButton hydrate-on-interaction="click" />
</template>

त्वरित जाँच

हाइड्रेशन रणनीतियों की अपनी समझ जाँचिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने विलंबित हाइड्रेशन सीखा:

Nuxt का Lazy उपसर्ग component को आवश्यकता पड़ने पर आयात करता है
hydrateOnVisible — IntersectionObserver के माध्यम से स्क्रीन के नीचे वाले भाग के लिए
hydrateOnIdle — गैर-ज़रूरी कार्यों के लिए, निष्क्रिय समय के दौरान
hydrateOnInteraction — घटना-आधारित, जैसे क्लिक या फ़ोकस
मुख्य Vue इन्हें defineAsyncComponent पर hydrate सहायक के रूप में उपलब्ध कराता है

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “स्थगित हाइड्रेशन रणनीतियाँ” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “स्थगित हाइड्रेशन रणनीतियाँ” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“स्थगित हाइड्रेशन रणनीतियाँ” में मैं क्या सीखूँगा?

hydrateOnIdle(), hydrateOnVisible(), hydrateOnInteraction() — Nuxt लेज़ी हाइड्रेशन आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“स्थगित हाइड्रेशन रणनीतियाँ” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Vue Suspense कंपोनेंट
defineAsyncComponent के साथ एसिंक्रोनस कंपोनेंट
renderToWebStream के साथ स्ट्रीमिंग SSR
स्थगित हाइड्रेशन रणनीतियाँ

← Vue Academy पर वापस जाएँ