रेंडरिंग का मतलब ऐसे पेज को बनाने के लिए कोड बनाने की प्रोसेस से है जिससे असली उपयोगकर्ता अपने ब्राउज़र के ज़रिए इंटरैक्ट कर सकें. इसमें कॉन्टेंट तैयार करना, लॉजिक लागू करना, और प्रोसेस करना, सभी यूज़र इंटरफ़ेस (यूआई) एलिमेंट और फ़ाइनल पेज को दिखाने के लिए ज़रूरी अन्य कॉम्पोनेंट शामिल हैं. कॉन्टेंट-ड्रिवन ऐप्लिकेशन में, तेज़ लोड होने की स्पीड, इंतज़ार का समय कम करने, और रेंडर होने में कम समय लगता है.
सर्वर साइड रेंडरिंग (SSR)
सर्वर-साइड रेंडरिंग (एसएसआर) में वेब पेजों को सर्वर पर रेंडर करना और फिर पूरी तरह रेंडर किए गए एचटीएमएल को JavaScript के साथ क्लाइंट-साइड पर रेंडर करने के बजाय, क्लाइंट के ब्राउज़र पर भेजना शामिल है. जब उपयोगकर्ता किसी ऐप्लिकेशन को ऐक्सेस करते हैं, तो उनका ब्राउज़र सर्वर को एक अनुरोध भेजता है. ऐप्लिकेशन, सर्वर पर अनुरोध को प्रोसेस करता है. इसमें डेटाबेस या बाहरी एपीआई से डेटा इकट्ठा करना शामिल है. इसके बाद, अनुरोध किए गए पेज के लिए एचटीएमएल को रेंडर करता है. इसके बाद, सर्वर, पेज के पूरी तरह रेंडर किए गए एचटीएमएल को उपयोगकर्ता के ब्राउज़र पर वापस भेजता है. उपयोगकर्ता के ब्राउज़र को एचटीएमएल मिलता है, तो ब्राउज़र सभी ज़रूरी JavaScript फ़ाइलें लोड करता है.
एसएसआर का इस्तेमाल करने के फ़ायदों में, तेज़ी से लोड होने की शुरुआती स्पीड, सर्च इंजन ऑप्टिमाइज़ेशन (एसईओ) की परफ़ॉर्मेंस, भरोसा, और बेहतर उपयोगकर्ता अनुभव शामिल हैं. हालांकि, क्लाइंट-साइड रेंडरिंग (सीएसआर) की तुलना में, एसएसआर को लागू करना ज़्यादा मुश्किल हो सकता है. इसकी वजह परफ़ॉर्मेंस ओवरहेड और ऐसे ऐप्लिकेशन बनाने और उन्हें बनाए रखने के लिए ज़रूरी डेवलपमेंट स्किल होती है जो एसएसआर पर आधारित हों. एसएसआर, कॉन्टेंट पर आधारित वेब ऐप्लिकेशन, ई-कॉमर्स प्लैटफ़ॉर्म, और ऐसे किसी भी ऐप्लिकेशन के लिए खास तौर पर फ़ायदेमंद है जिसके लिए एसईओ परफ़ॉर्मेंस अच्छी होनी चाहिए और शुरुआती रिस्पॉन्स स्पीड तेज़ होनी चाहिए.
स्टैटिक साइट जनरेशन (एसएसजी)
स्टैटिक साइट जनरेशन (एसएसजी), बिल्ड के समय स्टैटिक एचटीएमएल फ़ाइलें जनरेट करता है और उन्हें सर्वर-साइड या क्लाइंट-साइड रेंडरिंग के बिना उपयोगकर्ताओं को डिलीवर करता है. वेब कॉन्टेंट बनाया जाता है. यह आम तौर पर Markdown, JSON या YAML जैसे स्ट्रक्चर्ड फ़ॉर्मैट में होता है. इसमें टेक्स्ट, इमेज, और अन्य एसेट शामिल होते हैं. Hugo या Jekyll जैसे स्टैटिक साइट जनरेटर टूल, कॉन्टेंट को प्रोसेस करते हैं और एचटीएमएल, सीएसएस, और JavaScript फ़ाइलें जनरेट करते हैं. स्टैटिक आउटपुट पूरी वेबसाइट है और इन स्टैटिक फ़ाइलों को वेब सर्वर, सीडीएन या होस्टिंग सेवा पर डिप्लॉय किया जाता है.
web.dev पर सीएसएस और एचटीएमएल के बारे में ज़्यादा जानें.
फ़ाइलें स्टैटिक होती हैं, इसलिए उन्हें कैश मेमोरी में सेव किया जा सकता है, इसलिए वे बहुत जल्दी लोड होती हैं. एसएसजी उन वेब ऐप्लिकेशन के लिए एक अच्छा विकल्प है जो बार-बार नहीं बदलते हैं या जो समय-समय पर साइट के बिल्ड के ज़रिए अपडेट होते हैं. यह डाइनैमिक इंटरैक्टिविटी वाले वेब ऐप्लिकेशन के लिए सही विकल्प नहीं है.
क्लाइंट-साइड रेंडरिंग (सीएसआर)
क्लाइंट-साइड रेंडरिंग (सीएसआर), क्लाइंट के ब्राउज़र पर होती है, सर्वर पर नहीं. वेब ऐप्लिकेशन अक्सर कम से कम एचटीएमएल टेंप्लेट पर लोड किए जाते हैं. इसके बाद, JavaScript और सर्वर या एपीआई के डेटा का इस्तेमाल करके, कॉन्टेंट में डाइनैमिक तौर पर बदलाव किए जाते हैं. ऐप्लिकेशन के अनुरोध के बाद, सर्वर पेज को रेंडर करने के लिए ज़रूरी बुनियादी स्ट्रक्चर और JavaScript कोड के साथ कम से कम एक एचटीएमएल दस्तावेज़ भेजता है. JavaScript कोड को उपयोगकर्ता के ब्राउज़र में चलाया जाता है. इसके बाद कोड, फ़ेच किए गए डेटा को प्रोसेस करता है और कॉन्टेंट जनरेट करता है. इसमें सीएसएस, एचटीएमएल, और सभी इंटरैक्टिव एलिमेंट शामिल हैं. इसके बाद JavaScript कोड, उपयोगकर्ता के इंटरैक्शन का जवाब देता है, जैसे कि फ़ॉर्म सबमिट करना.
सीएसआर के फ़ायदों में पेज पर तेज़ी से ट्रांज़िशन और रिस्पॉन्सिव इंटरफ़ेस शामिल हैं. सीएसआर पर आधारित वेब ऐप्लिकेशन एसएसआर की तुलना में, ऐप्लिकेशन को लोड होने में आम तौर पर ज़्यादा समय लगता है, जिसकी वजह से एसईओ को चुनौती दे सकती है. सीएसआर आवेदनों की बढ़ती पहुंच के साथ, इन्हें डेवलप करना और उनका रखरखाव करना काफ़ी मुश्किल हो जाता है.