क्यों Astro ?

Astro ब्लॉग, मार्केटिंग और ई-कॉमर्स जैसी सामग्री-संचालित वेबसाइटें बनाने के लिए वेब फ्रेमवर्क है। Astro को अन्य फ्रेमवर्क की तुलना में JavaScript ओवरहेड और जटिलता को कम करने के लिए एक नयी फ्रंटएंड वास्तुकला का नेतृत्व करने के लिए जाना जाता है। यदि आपको ऐसी वेबसाइट चाहिए जो तेजी से लोड हो और उसका SEO बढ़िया हो, तो Astro आपके लिए है।

विशेषताएँ

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

Astro के कुछ मुख्य आकर्षण:

द्वीप: सामग्री-संचालित वेबसाइटों के लिए अनुकूलित एक अवयव-आधारित वेब वास्तुकला।
UI-अज्ञेयवादी: React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components और बहुत कुछ का समर्थन करता है।
सर्वर-प्रथम: आपके आगंतुकों के उपकरणों से महंगी रेंडरिंग हटाता है।
शून्य JS, डिफ़ॉल्ट रूप से: आपकी साइट को धीमा करने के लिए कम क्लाइंट-साइड Javascript।
सामग्री संग्रह: अपनी Markdown कंटेंट के लिए TypeScript प्रकार-सुरक्षा व्यवस्थित करें, सत्यापित करें और प्रदान करें।
अनुकूलन: Tailwind, MDX और चुनने के लिए सैकड़ों एकीकरण।

डिज़ाइन सिद्धांत

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

Astro के पांच डिज़ाइन सिद्धांत…

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

सामग्री-आधारित

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

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

एक स्थिर साइट बिल्डर के रूप में शुरुआत से ही सामग्री पर Astro के केंद्र ने 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) जैसे महत्वपूर्ण मेट्रिक्स शामिल हैं - जो सामग्री-केंद्रित वेबसाइटों के लिए ज्यादा मायने नहीं रखता है जहां प्रथम-लोड प्रदर्शन आवश्यक है।

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

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

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

प्रत्येक 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 को वेब डेवलपमेंट के साथ-साथ कौशल स्तर या पिछले अनुभव के आधार पर अंकित और उपगम्य अनुभव के लिए डिज़ाइन किया गया था।

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

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

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

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

डेवलपर-केंद्रित

हमारा दृढ़ विश्वास है कि Astro तभी एक सफल परियोजना है यदि लोग इसका उपयोग करना पसंद करते हैं। Astro के साथ निर्माण करते समय Astro के पास आपकी सहायता के लिए आवश्यक सभी चीजें मौजूद हैं।

Astro डेवलपर टूल में निवेश करता है जैसे कि आपके टर्मिनल खोलने के क्षण से एक शानदार CLI अनुभव, सिंटैक्स हाइलाइटिंग, TypeScript और Intellisense के लिए एक आधिकारिक VS Code एक्सटेंशन, और सैकड़ों सामुदायिक योगदानकर्ताओं द्वारा सक्रिय रूप से बनाए रखा गया दस्तावेज़ और 14 भाषाओं में उपलब्ध है।

Discord पर हमारा स्वागत करने वाला, सम्मानजनक, समावेशी समुदाय समर्थन, प्रेरणा और प्रोत्साहन प्रदान करने के लिए तैयार है। अपने परियोजना में सहायता प्राप्त करने के लिए #support थ्रेड खोलें। सुरक्षित प्रतिक्रिया और रचनात्मक आलोचना के लिए अपनी Astro साइट्स, ब्लॉग पोस्ट, वीडियो और यहां तक कि प्रगति पर काम साझा करने के लिए हमारे समर्पित #showcase चैनल पर जाएं। हमारे साप्ताहिक सामुदायिक कॉल, “Talking and Doc’ing” और API/bug bashes जैसे नियमित लाइव आयोजन में भाग लें।

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

GitHub मुद्दा बनाएं

हमें प्रतिक्रिया भेजें