इसे छोड़कर कंटेंट पर जाएं
Astro Astro

क्यों Astro ?

Astro तेज़, सामग्री-केंद्रित वेबसाइटें बनाने के लिए एक ऑल-इन-वन वेब फ्रेमवर्क है।

किसी अन्य वेब फ्रेमवर्क के बजाय Astro को क्यों चुनना चाहिए ? यहां पांच आन्तरक डिज़ाइन सिद्धांत दिए गए हैं जो आपको यह समझाने में मदद करेंगे हमने Astro को क्यों बनाया, वे समस्याएँ जिनका समाधान करने के लिए यह मौजूद हैं, एवं Astro आपके परियोजना या आपकी टीम के लिए सबसे उत्तम विकल्प क्यों हो सकता है।

Astro is…

  1. सामग्री-केंद्रित: Astro सामग्री-समृद्ध वेबसाइटों के लिए डिज़ाइन किया गया था।
  2. सर्वर-प्रथम: जब वेबसाइटें सर्वर पर HTML प्रस्तुत करती हैं तो वे तेजी से चलती हैं।
  3. डिफ़ॉल्ट रूप से तेज़: Astro में धीमी वेबसाइट बनाना असंभव होना चाहिए।
  4. प्रयोग करने में आसान: Astro के साथ कुछ बनाने के लिए आपको विशेषज्ञ होने की आवश्यकता नहीं है।
  5. पूर्ण-विशेषताओं वाला, लेकिन लचीला: 100 से अधिक Astro एकीकरण दिए गए हैं चुन्ने के लिए।

सामग्री-केंद्रित

Astro को सामग्री-समृद्ध वेबसाइटों के निर्माण के लिए डिज़ाइन किया गया था। इसमें अधिकांश मार्केटिंग साइटें, प्रकाशन साइटें, दस्तावेज़ीकरण साइटें, ब्लॉग, पोर्टफोलियो एवं कुछ इ-व्यापार साइटें शामिल हैं।

इसके विपरीत, अधिकांश आधुनिक वेब फ्रेमवर्क का डिज़ाइन वेब एप्लिकेशन बनाने के लिए किया गया हैं। ये फ्रेमवर्क ब्राउज़र में अधिक जटिल, एप्लिकेशन-जैसे अनुभवों के निर्माण के लिए सबसे अच्छा काम करते हैं जैसे की: लॉग-इन एडमिन डैशबोर्ड, इनबॉक्स, सोशल नेटवर्क, टूडू सूचियां एवं यहां तक कि नेटिव एप्लिकेशन जैसे की Figma एवं Ping।

Astro के बारे में समझने के लिए यह सबसे महत्वपूर्ण अंतरों में से एक है। सामग्री पर Astro का अद्वितीय केंद्र Astro को समझौते बनाने एवं बेजोड़ प्रदर्शन सुविधाएँ प्रदान करने की अनुमति देता है, जिन्हें लागू करने के लिए अधिक एप्लिकेशन-केंद्रित वेब फ्रेमवर्क का कोई मतलब नहीं होगा।

सर्वर-प्रथम

Astro जितना संभव हो सके क्लाइंट-साइड रेंडरिंग की तुलना में सर्वर-साइड रेंडरिंग का लाभ उठाता है। यह वही दृष्टिकोण है जिसका पारंपरिक सर्वर-साइड फ्रेमवर्क जैसे की - PHP, WordPress, Laravel, Ruby on Rails, आदि -- उपयोग कर रहे दशकों के लिए। लेकिन इसे जानने के लिए आपको एक दूसरी सर्वर-साइड भाषा सीखने की ज़रूरत नहीं है। Astro के साथ, सब कुछ अभी भी केवल HTML, CSS एवं Javascript (या Typescript, यदि आप चाहें तो) है।

यह दृष्टिकोण अन्य आधुनिक Javascript वेब फ्रेमवर्क जैसे की Next.js, SvelteKit, Nuxt, Remix, एवं अन्य के विपरीत है। इन फ्रेमवर्क के लिए आपकी संपूर्ण वेबसाइट के क्लाइंट-साइड रेंडरिंग की आवश्यकता होती है एवं इनमें मुख्य रूप से प्रदर्शन संबंधी चिंताओं को दूर करने के लिए सर्वर-साइड रेंडरिंग शामिल होती है। Astro के मल्टी पृष्ठ ऐप (MPA) दृष्टिकोण के विपरीत, इस दृष्टिकोण को सिंगल पृष्ठ ऐप (SPA) करार दिया गया है।

SPA प्रतिरूप के अपने फायदे हैं। हालाँकि, ये अतिरिक्त जटिलता और प्रदर्शन समझौतों की कीमत पर आते हैं। ये समझौते पृष्ठ प्रदर्शन को नुकसान पहुंचाते हैं - जिसमें Time to Interactive (TTI) जैसे महत्वपूर्ण मेट्रिक्स शामिल हैं - जो सामग्री-केंद्रित वेबसाइटों के लिए ज्यादा मायने नहीं रखता है जहां प्रथम-लोड प्रदर्शन आवश्यक है।

डिफ़ॉल्ट रूप से तेज़

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

  • प्रत्येक 100ms तेज़ → 1% अधिक रूपांतरण (Mobify, प्रति वर्ष +$380,000 की कमाई)
  • 50% तेज़ → 12% अधिक बिक्री (AutoAnything)
  • 20% तेज़ → 10% अधिक रूपांतरण (Furniture Village)
  • 40% तेज़ → 15% अधिक साइन-अप (Pinterest)
  • 850ms तेज़ → 7% अधिक रूपांतरण (COOK)
  • हर 1 सेकंड धीमा → 10% कम उपयोगकर्ता (BBC)

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

Astro का जादू इसमें है कि यह ऊपर बताए गए दो मूल्यों को कैसे जोड़ता है - सर्वर-प्रथम MPA वास्तुकला के साथ एक सामग्री फोकस - समझौते करने और ऐसी सुविधाएं प्रदान करने के लिए जो अन्य फ्रेमवर्क नहीं कर सकते हैं। इसका परिणाम हर वेबसाइट के लिए अद्भुत वेब प्रदर्शन है। हमारा लक्ष्य: Astro के साथ धीमी वेबसाइट बनाना लगभग असंभव होना चाहिए।

एक Astro वेबसाइट सबसे लोकप्रिय React वेब फ्रेमवर्क के साथ निर्मित उसी साइट की तुलना में 90% कम Javascript के साथ 40% तेजी से लोड हो सकती है। लेकिन इसके लिए हमारी बात पर विश्वास न करें: देखिये कैसे Astro का प्रदर्शन देखके Ryan Carniato (Solid.js और Marko के निर्माता) अवाक रह गए।

प्रयोग करने में आसान

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

हमने यह सुनिश्चित करके शुरुआत की कि आप किसी भी पसंदीदा UI अवयव भाषा का उपयोग कर सकते हैं जिसे आप पहले से जानते हैं। एक Astro परियोजना में नए UI अवयव बनाने के लिए React, Preact, Svelte, Vue, Solid, Lit और कई अन्य सभी समर्थित हैं।

हम यह भी सुनिश्चित करना चाहते थे कि Astro के पास एक बेहतरीन अंतर्निहित अवयव भाषा भी हो। ऐसा करने के लिए, हमने स्वयं की .astro UI भाषा बनाई। यह HTML से अत्यधिक प्रभावित है: HTML का कोई भी वैध टुकड़ा पहले से ही एक वैध Astro अवयव है! लेकिन यह अन्य अवयव भाषाओं जैसे JSX अभिव्यक्तियों (React) और डिफ़ॉल्ट रूप से CSS स्कोपिंग (Svelte और Vue) से प्रेरित हो कर ली गई हमारी कुछ पसंदीदा सुविधाओं को भी जोड़ती है। HTML से यह निकटता बिना किसी ओवरहेड के प्रगतिशील संवर्द्धन और सामान्य पहुंच पैटर्न का उपयोग करना भी आसान बनाती है।

Astro को अन्य UI फ्रेमवर्क और भाषाओं की तुलना में कम जटिल बनाया गया था। इसका एक बड़ा कारण यह है कि Astro को ब्राउज़र में नहीं, बल्कि सर्वर पर रेंडर करने के लिए डिज़ाइन किया गया था। इसका मतलब है कि आपको इन सब गुण/खूबियां के बारे में चिंता करने की ज़रूरत नहीं है जैसे की: hooks (React), stale closures (also React), refs (Vue), observables (Svelte), atoms, selectors, reactions, या derivations। सर्वर पर कोई reactivity नहीं है, इसलिए सारी जटिलता दूर हो जाती है।

हमारी पसंदीदा कहावतों में से एक है: जटिलता चुनें। हमने Astro को विकासक अनुभव से यथासंभव “आवश्यक जटिलता” को हटाने के लिए डिज़ाइन किया है, खासकर जब आप पहली बार इसमें शामिल होते हैं। आप केवल HTML और CSS के साथ Astro में एक “Hello World” उदाहरण वेबसाइट बना सकते हैं। फिर, जब आपको कुछ अधिक शक्तिशाली बनाने की आवश्यकता होती है, तो आप धीरे-धीरे नई सुविधाओं और API तक पहुंच सकते हैं।

पूर्ण-विशेषताओं वाला, लेकिन लचीला

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

यदि आपको अधिक नियंत्रण की आवश्यकता है, तो आप Astro को React, Svelte, Vue, Tailwind CSS, MDX और अन्य जैसे 100 से अधिक एकीकरणों के साथ विस्तारित कर सकते हैं। केवल एक आदेश से अपने पसंदीदा CMS (EN) को कनेक्ट करें या अपने पसंदीदा होस्ट पर तैनात करें (EN)।

Astro UI-अज्ञेयवादी है, जिसका अर्थ है कि आप अपना खुद का UI फ्रेमवर्क (BYOF) ला सकते हैं। Astro में React, Preact, Solid, Svelte, Vue, और Lit सभी आधिकारिक तौर पर समर्थित हैं। आप एक ही पृष्ठ पर अलग-अलग फ्रेमवर्क को मिला सकते हैं, जिससे भविष्य में प्रवास आसान हो जाएगा और परियोजना को एक ही फ्रेमवर्क में बंद होने से रोका जा सकेगा।