एस्ट्रो v6 आर्किटेक्चर नियम (सख्त मोड)

# Astro v6 आर्किटेक्चर नियम (सख्त मोड) ## 1. मुख्य दर्शन - Astro के "HTML-first / zero JavaScript by default" सिद्धांत का पालन करें: - सब कुछ स्थिर HTML है जब तक कि इंटरैक्टिविटी स्पष्ट रूप से आवश्यक न हो। - JavaScript एक लागत है, इसे केवल तभी जोड़ें जब यह वास्तविक उपयोगकर्ता मूल्य बनाता है। - हमेशा "Islands Architecture" में सोचें: - पेज स्थिर HTML है - इंटरैक्टिव हिस्से अलग-अलग द्वीप हैं - पूरे पेज को कभी भी ऐप की तरह न मानें - कोई भी JavaScript लिखने से पहले, हमेशा पूछें: "क्या इसे HTML + CSS या सर्वर-साइड लॉजिक से हल किया जा सकता है?" ## 2. कंपोनेंट मॉडल - `.astro` कंपोनेंट्स का उपयोग करें: - लेआउट - संयोजन - स्थिर UI - डेटा प्राप्त करना - सर्वर-साइड लॉजिक (frontmatter) - `.astro` कंपोनेंट्स: - बिल्ड-टाइम या सर्वर-साइड पर चलते हैं - डिफ़ॉल्ट रूप से JavaScript शिप नहीं करते - फ्रेमवर्क-अज्ञेय बने रहना चाहिए - `.astro` के अंदर React/Vue/Svelte hooks का कभी उपयोग न करें ## 3. द्वीप (इंटरैक्टिव कंपोनेंट्स) - इंटरैक्टिविटी के लिए केवल फ्रेमवर्क कंपोनेंट्स (React, Vue, Svelte, आदि) का उपयोग करें। - हर इंटरैक्टिव कंपोनेंट को एक अलग द्वीप के रूप में मानें: - स्वतंत्र - आत्म-निहित - न्यूनतम दायरा - कभी नहीं: - पूरे पेज या लेआउट को हाइड्रेट करें - बड़े ट्री को एक ही द्वीप में लपेटें - लूप में अनावश्यक रूप से कई छोटे द्वीप बनाएं - प्राथमिकता दें: - स्थिर सूची रेंडरिंग - केवल न्यूनतम इंटरैक्टिव इकाई को हाइड्रेट करें ## 4. हाइड्रेशन रणनीति (महत्वपूर्ण) - हमेशा `client:*` निर्देशों का उपयोग करके हाइड्रेशन को स्पष्ट रूप से परिभाषित करें। - सबसे कम संभव प्राथमिकता चुनें: - `client:load` -> केवल महत्वपूर्ण, above-the-fold इंटरैक्टिविटी के लिए - `client:idle` -> पेज लोड के बाद द्वितीयक UI के लिए - `client:visible` -> below-the-fold या भारी कंपोनेंट्स के लिए - `client:media` -> रिस्पॉन्सिव / सशर्त UI के लिए - `client:only` -> केवल जब SSR टूटता है (window, localStorage, आदि) - डिफ़ॉल्ट नियम: - कभी भी `client:load` को डिफ़ॉल्ट न बनाएं - `client:visible` या `client:idle` को प्राथमिकता दें - हाइड्रेशन एक प्रदर्शन बजट है: - हर द्वीप JS जोड़ता है - कुल JS को न्यूनतम रखें ## 5. सर्वर बनाम क्लाइंट लॉजिक - सर्वर-साइड लॉजिक (`.astro` frontmatter के अंदर) को प्राथमिकता दें: - डेटा प्राप्त करना - परिवर्तन - फ़िल्टरिंग / सॉर्टिंग - व्युत्पन्न मान - केवल क्लाइंट-साइड स्टेट का उपयोग करें जब: - उपयोगकर्ता इंटरैक्शन के लिए आवश्यक हो - रीयल-टाइम अपडेट की आवश्यकता हो - टालें: - क्लाइंट पर लॉजिक की नकल करना - सर्वर लॉजिक को द्वीपों में स्थानांतरित करना ## 6. स्टेट प्रबंधन - जब तक सख्ती से आवश्यक न हो, क्लाइंट स्टेट से बचें। - यदि आवश्यक हो: - स्टेट को केवल द्वीप के अंदर सीमित करें - जब तक आवश्यक न हो, वैश्विक ऐप स्टेट न बनाएं - क्रॉस-द्वीप स्टेट के लिए: - हल्के साझा स्टोर का उपयोग करें (जैसे, nano stores) - डिफ़ॉल्ट रूप से भारी वैश्विक स्टेट सिस्टम से बचें ## 7. प्रदर्शन बाधाएं (कठोर नियम) - क्लाइंट को भेजे जाने वाले JavaScript को न्यूनतम करें: - Astro केवल हाइड्रेटेड कंपोनेंट्स के लिए JS लोड करता है - प्राथमिकता दें: - स्थिर रेंडरिंग - आंशिक हाइड्रेशन - आलसी हाइड्रेशन - टालें: - बड़ी सूचियों को हाइड्रेट करना - लूप में द्वीपों को दोहराना - `client:load` का अत्यधिक उपयोग - हर द्वीप: - अपना खुद का बंडल रखता है - स्वतंत्र रूप से लोड होता है - छोटा और केंद्रित रहना चाहिए ## 8. फ़ाइल और प्रोजेक्ट संरचना - `/pages` - प्रवेश बिंदु (SSG/SSR), कोई क्लाइंट लॉजिक नहीं - `/components` - साझा UI, द्वीप यहाँ रहते हैं - `/layouts` - केवल स्थिर रैपर - `/content` - Markdown / CMS डेटा - `.astro` फ़ाइलों को व्यवहार के बजाय संयोजन पर केंद्रित रखें ## 9. एंटी-पैटर्न (सख्त रूप से निषिद्ध) - `.astro` में hooks का उपयोग करना - Astro को SPA आर्किटेक्चर में बदलना - पूरे लेआउट/पेज को हाइड्रेट करना - हर जगह `client:load` का उपयोग करना - सूचियों को हाइड्रेटेड कंपोनेंट्स में मैप करना - स्थिर समस्याओं के लिए क्लाइंट JS का उपयोग करना - सर्वर लॉजिक को क्लाइंट लॉजिक से बदलना ## 10. पसंदीदा पैटर्न - स्थिर-प्रथम रेंडरिंग - न्यूनतम, अलग-अलग द्वीप - आलसी हाइड्रेशन (`visible`, `idle`) - सर्वर-साइड गणना - JS से पहले HTML + CSS - प्रगतिशील संवर्धन ## 11. निर्णय ढांचा (बहुत महत्वपूर्ण) हर सुविधा के लिए: 1. क्या यह स्थिर HTML हो सकता है? -> हाँ -> `.astro` का उपयोग करें 2. क्या इसे इंटरैक्शन की आवश्यकता है? -> नहीं -> स्थिर रहें 3. क्या इसे JS की आवश्यकता है? -> हाँ -> एक द्वीप बनाएं 4. इसे कब लोड होना चाहिए? -> सबसे कम प्राथमिकता वाला `client:*` चुनें ## 12. मानसिक मॉडल (गैर-परक्राम्य) - Astro नहीं है: - Next.js - SPA फ्रेमवर्क - React-प्रथम प्रणाली - Astro है: - स्थिर-प्रथम रेंडरर - आंशिक हाइड्रेशन प्रणाली - प्रदर्शन-प्रथम आर्किटेक्चर - सोचें: "HTML शिप करें + JS छिड़कें"