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

इस लेख में, मैं जेसन मिलर और एडी ओस्मानी के रेंडरिंग ऑन वेब लेख की समीक्षा करूंगा और इस विषय को समझाने का प्रयास करूंगा।

यह आलेख मेरे आलेख 'HTML रेंडरिंग कहां की जानी चाहिए?' पर आधारित है। जो मैंने कुछ समय पहले लिखा था। इसकी शुरुआत ब्लॉग पोस्ट में पूछे गए प्रश्न से होती है।

वेबसाइट विकसित करते समय, विभिन्न स्थानों पर तर्क और रेंडरिंग करने की संभावना होती है। जब वेब पेज विकसित करने के विभिन्न तरीके मौजूद हों तो डेवलपर्स किस दृष्टिकोण को प्राथमिकता देंगे, इसका निर्णय वे कैसे करेंगे?

यह निर्णय लेने के लिए, डेवलपर्स को रेंडरिंग विधियों और परिणामस्वरूप प्रदर्शन संबंधी समझौतों की अच्छी समझ होनी चाहिए।

ए.रेंडरिंग

यदि आप सोच रहे हैं कि रेंडरिंग विषय क्या है। आप ब्लॉग पोस्ट में विवरण पढ़ सकते हैं जहां मैंने इस विषय को समझाया है
।

बी. स्टेटिक बनाम डायनामिक वेब

समझने वाली एक और बात है स्टेटिक वेब और डायनामिक वेब के बीच का अंतर । स्थैतिक वेब पेज वे पेज होते हैं जो सर्वर से पेज प्राप्त करने के बाद वापस सर्वर पर नहीं जाते तथा AJAX के साथ अनुरोध करते हैं (HTML, CSS, JS), उनकी सामग्री उपयोगकर्ता के अनुसार नहीं बदलती या उसमें डेटा के परिवर्तन के कारण गतिशील डेटा (विनिमय दर, मौसम, आदि) नहीं होता। उदाहरण के लिए, ब्लॉग, समाचार, आदि। इसके विपरीत, डायनामिक पेज वे वेब पेज होते हैं जिनके लिए AJAX, API, डेटाबेस आदि की आवश्यकता होती है, जहां पेज की सामग्री कॉल किए गए समय अंतराल और मापदंडों के अनुसार बदलती रहती है।

सी. प्रदर्शन शर्तें

• टीटीएफबी (प्रथम बाइट का समय) लिंक पर क्लिक करने और सामग्री का पहला बिट प्राप्त करने के बीच का समय।
• एफपी (फर्स्ट पेंट) उपयोगकर्ता को पहला पिक्सेल दिखाने में लगने वाला समय।
• एफसीपी (प्रथम कंटेंटफुल पेंट) अनुरोध में पहली तार्किक सामग्री प्रदर्शित करने का समय।
• टीटीआई इंटरएक्टिव होने का समय वह समय जब पृष्ठ उपयोगकर्ता के साथ इंटरेक्शन के लिए तैयार होता है (सभी घटनाओं का कनेक्शन)

• एसएसआर (सर्वर साइड रेंडरिंग): यह वह विधि है जिसमें रेंडरिंग प्रक्रिया सर्वर साइड पर की जाती है और ASP.Net, JSP, PHP जैसी विधियों का उपयोग करके डेटाबेस से उन्हें पुनर्प्राप्त करके डायनामिक पेज तैयार किए जाते हैं। यहां, चूंकि स्क्रीन बनाने में JS की भूमिका बहुत कम होगी, इसलिए FP और FCP बहुत तेज़ होंगे, जबकि सर्वर से डेटा आने में लगने वाला समय TTFB में अधिक होगा ।
• सीएसआर (क्लाइंट साइड रेंडरिंग): यह वह विधि है जिसमें Angular, React, Vue, Svelte जैसी विधियों द्वारा ब्राउज़र साइड पर रेंडरिंग की जाती है, AJAX के साथ डायनामिक पेज खींचे जाते हैं तथा टेम्पलेट रेंडरिंग विधि के साथ टेम्पलेट + डेटा को संयोजित करके स्क्रीन पर स्क्रीन बनाई जाती है। इस पद्धति में, भले ही हम TTFB और FP को तेजी से निष्पादित करते हैं, हम TTI को तेज नहीं कर सकते हैं , अर्थात, उपयोगकर्ता को संबंधित वेब पेज के साथ बातचीत करने में लगने वाला समय।
• स्थैतिक रेंडरिंग: स्थैतिक पृष्ठों के लिए प्रयुक्त इस विधि में, चूंकि पृष्ठों में बहुत कम परिवर्तन होता है और डेटाबेस की आवश्यकता नहीं होती है, इसलिए सर्वर पर भेजे जाने से पहले पृष्ठों को प्री-रेंडरिंग विधि द्वारा उनकी अंतिम स्थिति में लाया जाता है और CDN, या एज-कैशिंग वातावरण में भेजा जाता है, तथा वहां से बहुत शीघ्रता से सेवा प्रदान की जाती है। हाल ही में, गैट्सबी और जेकेल टूल्स के साथ इस प्रकार के पेज बनाना बहुत आसान हो गया है। इन पृष्ठों पर, TTFB और TTI दोनों का समय काफी छोटा है। ऐसे पृष्ठों की JS निष्पादन या अंतःक्रिया की आवश्यकताएं बहुत कम और सीमित हैं।
• हाइब्रिड रेंडरिंग: हालांकि कुछ पृष्ठों के लिए उनकी सामग्री लोड के अनुसार SSR बनाना उचित है, लेकिन कुछ उच्च-लोड वाले पृष्ठों के लिए आलसी CSR बनाना भी उचित है। नेक्स्ट, नक्सट, नेस्ट, सैपर जैसे फ्रेमवर्क सामने आए हैं जो ऐसी स्थितियों का समर्थन करते हैं। कोड विकास में नेक्स्ट – रिएक्ट, नक्सट – व्यू, नेस्ट – एंगुलर, सैपर – स्वेल्ट घटक विकास पद्धति को अपनाते हुए इस फ्रेमवर्क में समान क्षमताएं हैं।

संदर्भ

• वेब पर रेंडरिंग
• स्थैतिक और गतिशील वेब पेजों के बीच अंतर
• HTML रेंडरिंग कहां किया जाना चाहिए?

आप इस लेख की अगली कड़ी या लेख समूह के अन्य लेखों तक पहुंचने के लिए इस लिंक पर क्लिक कर सकते हैं ।