वेब प्रदर्शन अनुकूलन और Lighthouse · पाठ

सर्वर-साइड रेंडरिंग (SSR) का प्रभाव

Server-Side Rendering (SSR) और Client-Side Rendering (CSR) के प्रदर्शन संबंधी समझौतों का मूल्यांकन कीजिए और TTI पर उनके प्रभाव को समझिए।

पाठ 3, कुल 4 में से11 चरण

सर्वर-साइड रेंडरिंग (SSR) का प्रभाव, CoddyKit पर वेब प्रदर्शन अनुकूलन और Lighthouse का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह वेब प्रदर्शन अनुकूलन और Lighthouse सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

SSR बनाम CSR: मूल विचार

वेब पेज कैसे बनाए जाते हैं, इसे समझने के पाठ में आपका स्वागत है! आज हम वेब सामग्री को आपके ब्राउज़र तक पहुँचाने के दो मूलभूत तरीकों का अध्ययन करेंगे: क्लाइंट-साइड रेंडरिंग (CSR) और सर्वर-साइड रेंडरिंग (SSR)।

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

क्लाइंट-साइड रेंडरिंग कैसे काम करती है

CSR में आपका ब्राउज़र एक न्यूनतम HTML file प्राप्त करता है, जो अक्सर JavaScript बंडल के लिंक वाला केवल एक खाली पेज होता है। यह खाली कैनवास जैसा है।

ब्राउज़र HTML डाउनलोड करता है: यह बहुत छोटा होता है और जल्दी डाउनलोड हो जाता है।
ब्राउज़र JavaScript डाउनलोड करता है: यह मुख्य भाग होता है और अक्सर बड़ा होता है।
JavaScript डेटा प्राप्त करके UI बनाता है: लोड होने के बाद JS चलता है, API को कॉल करता है और पेज में सामग्री गतिशील रूप से जोड़ता है।

इन चरणों के पूरा होने के बाद ही उपयोगकर्ता को सामग्री दिखाई देती है।

CSR प्रदर्शन और प्रारंभिक लोड

शुरुआत में CSR धीमा महसूस हो सकता है। उपयोगकर्ता को कुछ समय तक खाली स्क्रीन या लोडिंग संकेतक दिखाई दे सकता है। इसका प्रभाव First Contentful Paint (FCP) और Largest Contentful Paint (LCP) जैसे मापदंडों पर पड़ता है।

हालाँकि, एक बार लोड हो जाने पर एप्लिकेशन के भीतर आगे का नेविगेशन बहुत तेज़ हो सकता है, क्योंकि पूरे पेज के बजाय केवल डेटा प्राप्त करना पड़ता है।

यह सरल CSR उदाहरण आज़माएँ:

<!DOCTYPE html>
<html>
<head>
  <title>CSR Demo</title>
  <style>
    body { font-family: sans-serif; text-align: center; }
    #app { border: 1px solid #ccc; padding: 20px; margin: 20px auto; max-width: 300px; min-height: 50px; }
  </style>
</head>
<body>
  <div id="app"><p>Loading content...</p></div>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      setTimeout(() => {
        document.getElementById('app').innerHTML = '<h2>Welcome!</h2><p>Content rendered by JS.</p><button>Click Me</button>';
      }, 1000); // Simulate network/processing delay
    });
  </script>
</body>
</html>

सर्वर-साइड रेंडरिंग कैसे काम करती है

SSR में मुख्य कार्य सर्वर करता है। जब उपयोगकर्ता किसी पेज का अनुरोध करता है, तो सर्वर अनुरोध को संसाधित करता है, आवश्यक डेटा प्राप्त करता है और पूरा HTML प्रत्युत्तर तैयार करता है।

ब्राउज़र पेज का अनुरोध करता है: सर्वर को अनुरोध भेजता है।
सर्वर HTML बनाता है: डेटा प्राप्त करके सर्वर पर पूरा पेज रेंडर करता है।
ब्राउज़र को पूरा HTML मिलता है: प्रदर्शित करने के लिए तैयार पेज प्राप्त होता है।

HTML आते ही उपयोगकर्ता को लगभग तुरंत सामग्री दिखाई देने लगती है।

SSR प्रदर्शन और प्रारंभिक लोड

SSR सामान्यतः बहुत तेज़ First Contentful Paint (FCP) और Largest Contentful Paint (LCP) देता है। उपयोगकर्ताओं को उपयोगी सामग्री बहुत जल्दी दिखाई देती है, जिससे अनुमानित प्रदर्शन और SEO बेहतर होते हैं।

हालाँकि, सर्वर को प्रत्येक अनुरोध के लिए HTML बनाना पड़ता है। यदि इसे अनुकूलित न किया जाए, तो सर्वर की ओर विलंब बढ़ सकता है। आइए SSR-जैसा आउटपुट देखें:

<!DOCTYPE html>
<html>
<head>
  <title>SSR Demo</title>
  <style>
    body { font-family: sans-serif; text-align: center; }
    .content { border: 1px solid #ccc; padding: 20px; margin: 20px auto; max-width: 300px; }
  </style>
</head>
<body>
  <div class="content">
    <h2>Welcome!</h2>
    <p>Content rendered directly by the server.</p>
    <button onclick="alert('Hello from SSR!')">Click Me</button>
  </div>
</body>
</html>

इंटरैक्टिव होने तक का समय (TTI) समझना

इंटरैक्टिव होने तक का समय (TTI) यह मापता है कि किसी पेज को पूरी तरह इंटरैक्टिव होने में कितना समय लगता है। इसका अर्थ है:

पेज ने उपयोगी सामग्री प्रदर्शित कर दी हो (FCP/LCP)।
अधिकांश दिखाई देने वाले UI तत्वों के लिए इवेंट हैंडलर पंजीकृत हों।
पेज 50 मिलीसेकंड के भीतर उपयोगकर्ता की क्रियाओं पर प्रतिक्रिया देता हो।

TTI महत्वपूर्ण है, क्योंकि उपयोगकर्ता सामग्री देख सकता है, लेकिन यदि पेज इंटरैक्टिव न हो तो बटन पर क्लिक या फ़ील्ड में टाइप नहीं कर सकता।

SSR की TTI चुनौती: हाइड्रेशन

हालाँकि SSR सामग्री तेज़ी से उपलब्ध कराता है, लेकिन यह अक्सर स्थिर HTML भेजता है। इस HTML को गतिशील और इंटरैक्टिव बनाने के लिए, क्लाइंट-साइड JavaScript को अभी भी लोड होकर DOM का ‘नियंत्रण संभालना’ पड़ता है। इस प्रक्रिया को हाइड्रेशन कहा जाता है।

हाइड्रेशन के दौरान JavaScript इवेंट लिसनर जोड़ता है और वर्चुअल DOM बनाता है। यदि यह JS बंडल बड़ा है या इसे चलने में अधिक समय लगता है, तो सामग्री दिखाई देने के बाद भी यह TTI में देरी कर सकता है।

TTI की तुलना: SSR बनाम CSR

TTI पर प्रभाव अलग-अलग होता है:

CSR: TTI अक्सर FCP/LCP के लगभग साथ होता है, क्योंकि पूरी सामग्री और इंटरैक्टिविटी एक साथ लोड होती हैं। यदि JS बंडल छोटा है, तो TTI तेज़ हो सकता है।
SSR: FCP/LCP तेज़ होते हैं, लेकिन हाइड्रेशन धीमा होने पर TTI में देरी हो सकती है। उपयोगकर्ताओं को सामग्री दिखाई दे सकती है, लेकिन वे एक निराशाजनक ‘निष्क्रिय क्षेत्र’ का अनुभव कर सकते हैं, जहाँ कोई चीज़ प्रतिक्रिया नहीं देती।

लक्ष्य दृश्य सामग्री और इंटरैक्टिव सामग्री के बीच इस अंतर को कम करना है।

सही तरीका चुनना

SSR और CSR में से चुनाव आपके प्रोजेक्ट की आवश्यकताओं पर निर्भर करता है:

SSR इनके लिए बेहतर है: सामग्री-केंद्रित साइटें (ब्लॉग, ई-कॉमर्स), अच्छा SEO और धीमे कनेक्शन वाले उपयोगकर्ताओं के लिए तेज़ प्रारंभिक लोड।
CSR इनके लिए बेहतर है: अत्यधिक इंटरैक्टिव वेब एप्लिकेशन (डैशबोर्ड, सोशल मीडिया फ़ीड), जहाँ लोड होने के बाद का समृद्ध उपयोगकर्ता अनुभव प्रारंभिक लोड समय से अधिक महत्वपूर्ण होता है।

हाइब्रिड तरीक़े, जैसे स्टैटिक साइट जनरेशन (SSG) या प्रोग्रेसिव हाइड्रेशन, भी उपलब्ध हैं, जो दोनों के लाभों को मिलाते हैं।

त्वरित जाँच: रेंडरिंग की रणनीतियाँ

अब तक हमने जो सीखा है, उसके आधार पर Server-Side Rendering (SSR) और Client-Side Rendering (CSR) के बीच प्रदर्शन संबंधी समझौतों का सही वर्णन कौन-से कथन करते हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: SSR, CSR और TTI

इस पाठ में हमने Server-Side Rendering (SSR) और Client-Side Rendering (CSR) को समझा। आपने सीखा:

CSR रेंडरिंग का कार्य ब्राउज़र पर छोड़ देता है, जिससे प्रारंभिक सामग्री दिखने में देरी हो सकती है, लेकिन गतिशील अनुभव मिलते हैं।
SSR सर्वर पर HTML रेंडर करता है, जिससे प्रारंभिक सामग्री (FCP/LCP) तेज़ी से मिलती है, लेकिन हाइड्रेशन के कारण इंटरैक्टिविटी (TTI) में देरी हो सकती है।
इंटरैक्टिव होने का समय (TTI) महत्वपूर्ण है, क्योंकि यह मापता है कि पेज कब पूरी तरह उपयोग योग्य होता है।

इन दोनों में से चुनाव करते समय प्रारंभिक लोड की गति, इंटरैक्टिविटी की ज़रूरतों और TTI पर हाइड्रेशन के प्रभाव के बीच संतुलन बनाना पड़ता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ वेब प्रदर्शन अनुकूलन और Lighthouse सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “सर्वर-साइड रेंडरिंग (SSR) का प्रभाव” पाठ निःशुल्क है?

हाँ—“सर्वर-साइड रेंडरिंग (SSR) का प्रभाव” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। वेब प्रदर्शन अनुकूलन और Lighthouse पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“सर्वर-साइड रेंडरिंग (SSR) का प्रभाव” में मैं क्या सीखूँगा?

Server-Side Rendering (SSR) और Client-Side Rendering (CSR) के प्रदर्शन संबंधी समझौतों का मूल्यांकन कीजिए और TTI पर उनके प्रभाव को समझिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ वेब प्रदर्शन अनुकूलन और Lighthouse का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या वेब प्रदर्शन अनुकूलन और Lighthouse शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर वेब प्रदर्शन अनुकूलन और Lighthouse शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“सर्वर-साइड रेंडरिंग (SSR) का प्रभाव” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस वेब प्रदर्शन अनुकूलन और Lighthouse पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर वेब प्रदर्शन अनुकूलन और Lighthouse पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← वेब प्रदर्शन अनुकूलन और Lighthouse पर वापस जाएँ