Astro द्वीप

Astro ने द्वीप नामक एक फ्रंटएंड वास्तुकला का बीड़ा उठाया और उसे लोकप्रिय बनाया। द्वीप वास्तुकला के परिणामस्वरूप आपको अखंड Javascript प्रतिमान से बचने और पेज से सभी गैर-आवश्यक Javascript को स्वचालित रूप से हटाने में मदद करके बेहतर फ्रंटएंड प्रदर्शन प्राप्त होता है। डेवलपर्स Astro के साथ अपने पसंदीदा UI अवयवों और फ्रेमवर्क का उपयोग करते रहते हैं और फिर भी उन्हें ये लाभ मिलते हैं।

एक संक्षिप्त इतिहास

शीर्षक एक संक्षिप्त इतिहास

शब्द “अवयव द्वीप” पहली बार 2019 में Etsy के फ्रंटएंड वास्तुकार Katie Sylor-Miller द्वारा गढ़ा गया था। इस विचार को 11 अगस्त, 2020 को Preact निर्माता Jason Miller द्वारा इस पोस्ट में विस्तारित और प्रलेखित किया गया था।

“द्वीप” वास्तुकला का सामान्य विचार भ्रामक रूप से सरल है: सर्वर पर HTML पेज प्रस्तुत करें, और अत्यधिक गतिशील क्षेत्रों के आसपास प्लेसहोल्डर या स्लॉट भर दे […] जिसे ग्राहक पर छोटे स्व-निहित विजेट में “हाइड्रेट” किया जा सकता है। , उनके सर्वर-रेंडर प्रारंभिक HTML का पुन: उपयोग करना। — Jason Miller, Preact के निर्माता

जिस तकनीक पर यह वास्तुशिल्प प्रतिमान बनता है उसे पार्शियल या चयनात्मक हाइड्रेशन के रूप में भी जाना जाता है।

इसके विपरीत, अधिकांश Javascript-आधारित वेब फ्रेमवर्क पूरी वेबसाइट को एक बड़े Javascript एप्लिकेशन (जिसे single-page application या SPA के रूप में भी जाना जाता है) के रूप में हाइड्रेट और प्रस्तुत करते हैं। SPA सरलता और शक्ति प्रदान करते हैं लेकिन भारी क्लाइंट-साइड Javascript उपयोग के कारण पेज-लोड प्रदर्शन समस्याओं से ग्रस्त हैं।

SPA का अपना स्थान है, यहां तक कि Astro पेज के अंदर अंतर्निहित (EN) भी। लेकिन, SPA में चयनात्मक और रणनीतिक रूप से हाइड्रेट करने की मूल क्षमता का अभाव है, जिससे वे आज वेब पर अधिकांश परियोजनाओं के लिए एक भारी-भरकम विकल्प बन गए हैं।

Sylor-Miller द्वारा पहली बार गढ़े गए उस अवयव द्वीप प्रतिमान का उपयोग करते हुए Astro पहले मुख्यधारा के Javascript वेब फ्रेमवर्क के रूप में लोकप्रिय हो गया, जिसमें चयनात्मक हाइड्रेशन अंतर्निहित था।

एक द्वीप क्या है?

शीर्षक एक द्वीप क्या है?

Astro में, एक “द्वीप” पेज पर किसी भी संवादात्मक UI अवयव को संदर्भित करता है। एक द्वीप को एक संवादात्मक विजेट के रूप में सोचें जो अन्यथा स्थिर, हल्के, सर्वर-रेंडर HTML के समुद्र में तैर रहा है।

शीर्ष लेख (संवादात्मक द्वीप)

साइड बार (स्थिर HTML)

स्थिर कंटेंट जैसे पाठ, चित्र इत्यादि।

छवि हिंडोला (संवादात्मक द्वीप)

पाद लेख (स्थिर HTML)

स्रोत: द्वीप वास्तुकला: Jason Miller

एक द्वीप हमेशा पेज पर अन्य द्वीपों से एकांत चलता है, और एक पेज पर कई द्वीप मौजूद हो सकते हैं। इसके बावजूद द्वीप अभी भी स्थिति साझा कर सकते हैं और एक-दूसरे के साथ संवाद कर सकते हैं, भले ही वे विभिन्न अवयव संदर्भों में चलते हों।

यह लचीलापन Astro को React, Preact, Svelte, Vue, और SolidJS जैसे कई UI फ्रेमवर्क का समर्थन करने की अनुमति देता है। क्योंकि वे स्वतंत्र हैं, आप प्रत्येक पेज पर कई फ्रेमवर्क भी मिला सकते हैं।

टिप

हालाँकि अधिकांश डेवलपर्स केवल एक UI फ्रेमवर्क पर टिके रहेंगे, Astro एक ही परियोजना में कई फ्रेमवर्क का समर्थन करता है। यह आपको इसकी अनुमति देता है:

• वह फ्रेमवर्क चुनें जो प्रत्येक अवयव के लिए सर्वोत्तम हो।
• कोई नयी परियोजना शुरू किए बिना एक नया फ्रेमवर्क सीखें।
• विभिन्न फ्रेमवर्क में काम करते हुए भी दूसरों के साथ सहयोग करें।
• किसी मौजूदा साइट को बिना किसी स्र्कना के क्रमिक रूप से दूसरे फ्रेमवर्क में परिवर्तित करें।

एक द्वीप बनाना

शीर्षक एक द्वीप बनाना

डिफ़ॉल्ट रूप से, Astro स्वचालित रूप से प्रत्येक UI अवयव को केवल HTML और CSS में प्रस्तुत करेगा, और साथ ही में सभी क्लाइंट-साइड Javascript को स्वचालित रूप से हटा देगा।

src/pages/index.astro

<MyReactComponent />

यह सख्त लग सकता है, लेकिन यह व्यवहार Astro वेबसाइटों को डिफ़ॉल्ट रूप से तेज़ रखता है और डेवलपर्स को गलती से अनावश्यक या अवांछित Javascript भेजने से बचाता है जो उनकी वेबसाइट को धीमा कर सकते है।

किसी भी स्थिर UI अवयव को एक संवादात्मक द्वीप में बदलने के लिए केवल client::* निर्देश की आवश्यकता होती है। इसके बाद Astro अनुकूलित प्रदर्शन के लिए आपके क्लाइंट-साइड Javascript को स्वचालित रूप से बनाता और बंडल करता है।

src/pages/index.astro

<!-- यह घटक अब पृष्ठ पर संवादात्मक है!
     आपकी बाकी वेबसाइट स्थिर रहती है। -->
<MyReactComponent client:load />

द्वीपों के साथ, क्लाइंट-साइड Javascript केवल उन स्पष्ट संवादात्मक अवयवों के लिए लोड की जाती है जिन्हें आप client:* निर्देशों का उपयोग करके चिह्नित करते हैं।

और क्योंकि अन्योन्यक्रिया को अवयव-स्तर पर कॉन्फ़िगर किया गया है, आप इसके उपयोग के आधार पर प्रत्येक अवयव के लिए अलग-अलग लोडिंग प्राथमिकताओं को संभाल सकते हैं। उदाहरण के लिए, client: idle ब्राउज़र के निष्क्रिय होने पर एक अवयव को लोड करने के लिए कहता है, और client: visible एक अवयव को व्यूपोर्ट में प्रवेश करने के बाद ही लोड करने के लिए कहता है।

द्वीपों के क्या लाभ हैं?

शीर्षक द्वीपों के क्या लाभ हैं?

Astro द्वीप के साथ निर्माण का सबसे स्पष्ट लाभ प्रदर्शन है: आपकी वेबसाइट का अधिकांश भाग तेज़, स्थिर HTML में परिवर्तित हो जाता है और Javascript केवल उन व्यक्तिगत अवयवों के लिए लोड की जाती है जिन्हें इसकी आवश्यकता होती है। Javascript सबसे धीमी परिसंपत्तियों में से एक है जिसे आप प्रति-बाइट लोड कर सकते हैं, इसलिए प्रत्येक बाइट मायने रखती है।

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

इससे भी बेहतर, आप Astro को बता सकते हैं कि प्रत्येक अवयव को कैसे और कब प्रस्तुत करना है। यदि उस छवि हिंडोले को लोड करना वास्तव में महंगा है, तो आप एक विशेष client निर्देश (EN) संलग्न कर सकते हैं जो Astro को हिंडोले को केवल तभी लोड करने के लिए कहता है जब वह पेज पर दिखाई देने लगे। यदि उपयोगकर्ता इसे कभी नहीं देखते है, तो यह कभी लोड नहीं होता है।

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

Astro की तेज़-दर-डिफ़ॉल्ट प्रदर्शन कहानी का रहस्य द्वीप हैं!