एज पर सर्वर-साइड रेंडरिंग
तेज़ प्रथम रेंडर, गतिशील सामग्री और SEO-अनुकूल HTML के लिए एज पर पूर्ण-स्टैक पृष्ठ तुरंत रेंडर करें
एज पर सर्वर-साइड रेंडरिंग, CoddyKit पर Cloudflare Workers और Deno के साथ एज कंप्यूटिंग का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Cloudflare Workers और Deno के साथ एज कंप्यूटिंग सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Edge पर SSR क्यों?
Server-Side Rendering (SSR) browser को blank shell भेजने के बजाय हर request पर HTML generate करता है।
Edge पर SSR चलाने का अर्थ है:
- HTML user के निकट बनाया जाता है, इसलिए latency कम होती है
- बेहतर first paint और SEO
- हर request के अनुसार personalized, dynamic content
SSR बनाम Static Sites
Static pages पहले से बनाए और cached होते हैं; वे तेज़ होते हैं, लेकिन सभी के लिए एक जैसे होते हैं।
SSR हर request पर HTML बनाता है, इसलिए user, location या live data पर निर्भर content के लिए आदर्श है।
कई edge apps दोनों का मिश्रण उपयोग करते हैं।
Worker से HTML लौटाना
मूल रूप से, SSR सही content type के साथ HTML string लौटाना ही है।
export default {
async fetch(request) {
const html = '<!DOCTYPE html><html><body><h1>Hello Edge</h1></body></html>';
return new Response(html, {
headers: { 'Content-Type': 'text/html;charset=UTF-8' }
});
}
};Dynamic Data inject करना
पहले data fetch करें, फिर response देने से पहले उसे HTML template में शामिल करें।
const user = await env.DB.prepare('SELECT name FROM users WHERE id = ?')
.bind(id).first();
const html = '<h1>Welcome, ' + escapeHtml(user.name) + '</h1>';Edge पर Framework SSR
आधुनिक frameworks server पर string में render होते हैं। उनके edge adapters इसे Worker के अंदर चलाते हैं।
import { renderToString } from 'react-dom/server';
import { App } from './App';
const markup = renderToString(App({ user }));Streaming SSR
पूरे page के तैयार होने की प्रतीक्षा करने के बजाय, render होते समय HTML को stream करें, ताकि browser जल्दी painting शुरू कर सके।
const { readable, writable } = new TransformStream();
renderToReadableStream(App()).then((s) => s.pipeTo(writable));
return new Response(readable, {
headers: { 'Content-Type': 'text/html' }
});Hydration
SSR static HTML बनाता है, फिर client JS उसे hydrates करके interactive बनाता है।
Client को वही data भेजें, ताकि hydration server output से बिल्कुल मेल खाए; mismatch होने पर warnings आती हैं।
const tag = '<script>window.__DATA__ = ' + JSON.stringify(data) + ';</script>';HTMLRewriter का उपयोग
Cloudflare का HTML पुनर्लेखक HTML को कुशलतापूर्वक stream और transform करता है, इसलिए base template में content inject करने के लिए बिल्कुल उपयुक्त है।
return new HTMLRewriter()
.on('title', { element(e) { e.setInnerContent('My Page'); } })
.transform(response);SSR Output को Cache करना
SSR output के पूरी तरह static हिस्सों को cache किया जा सकता है, लेकिन personalized pages को सार्वजनिक रूप से cache नहीं करना चाहिए।
Cache-Control का समझदारी से उपयोग करें और जहाँ आवश्यक हो, user के अनुसार vary करें।
headers.set('Cache-Control', 'private, no-store');SEO के लाभ
SSR पूरी तरह तैयार HTML लौटाता है, इसलिए crawlers वास्तविक content तुरंत देख लेते हैं और JS execution की आवश्यकता नहीं होती; इससे SEO और social previews बेहतर होते हैं।
सर्वोत्तम प्रथाओं का सारांश
मज़बूत edge SSR के लिए:
- Data fetch करें, फिर string या stream में render करें
- Interpolated data को हमेशा escape करें
- Matching client data के साथ hydrate करें
- तेज़ first paint के लिए stream करें
- Static हिस्सों को cache करें, private pages को सार्वजनिक रूप से कभी cache न करें
त्वरित जाँच
पूरे page को पहले render करने की तुलना में streaming SSR का मुख्य लाभ क्या है?
पुनरावृत्ति
अब आप edge पर पूरे pages render कर सकते हैं:
- हर request के लिए dynamic, escaped HTML लौटाएँ
- Speed के लिए framework adapters और streaming का उपयोग करें
- Matching client data के साथ hydrate करें
- HTMLRewriter से output transform करें और सावधानी से cache करें
Edge SSR तेज़, dynamic और SEO-friendly full-stack apps उपलब्ध कराता है।
एआई शिक्षक के साथ Cloudflare Workers और Deno के साथ एज कंप्यूटिंग सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 12
- पाठ
- 47
अक्सर पूछे जाने वाले प्रश्न
क्या “एज पर सर्वर-साइड रेंडरिंग” पाठ निःशुल्क है?
हाँ—“एज पर सर्वर-साइड रेंडरिंग” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“एज पर सर्वर-साइड रेंडरिंग” में मैं क्या सीखूँगा?
तेज़ प्रथम रेंडर, गतिशील सामग्री और SEO-अनुकूल HTML के लिए एज पर पूर्ण-स्टैक पृष्ठ तुरंत रेंडर करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Cloudflare Workers और Deno के साथ एज कंप्यूटिंग का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Cloudflare Workers और Deno के साथ एज कंप्यूटिंग शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Cloudflare Workers और Deno के साथ एज कंप्यूटिंग शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“एज पर सर्वर-साइड रेंडरिंग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Cloudflare Workers और Deno के साथ एज कंप्यूटिंग पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Workers Sites और Pages
- फ़्रंटएंड फ़्रेमवर्क एकीकरण
- Deno के साथ डेटाबेस प्रॉक्सी
- एज पर सर्वर-साइड रेंडरिंग