"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > एपिसोड द ग्रेट प्री-रेंडर मिशन - कस्टम एसएसआर और एसएसजी मास्टरी के लिए एरिन की खोज

एपिसोड द ग्रेट प्री-रेंडर मिशन - कस्टम एसएसआर और एसएसजी मास्टरी के लिए एरिन की खोज

2024-11-22 को प्रकाशित
ब्राउज़ करें:471

Episode  The Great Pre-Render Mission – Arin’s Quest for Custom SSR and SSG Mastery

एपिसोड 10: द ग्रेट प्री-रेंडर मिशन - कस्टम एसएसआर और एसएसजी मास्टरी के लिए एरिन की खोज


कोडेक्स के स्टेटिक वॉल्ट्स शांत प्रत्याशा के साथ चमक रहे थे। ये तिजोरी ज्ञान के मूक संरक्षक थे, उनकी दीवारें डेटा स्क्रॉल और चमकते पन्नों से सजी थीं जो उपयोगकर्ताओं के सम्मन की प्रतीक्षा कर रही थीं। आज, अरिन इन वॉल्ट्स की दहलीज पर खड़ा था, जिसे एक नए और आवश्यक शिल्प में महारत हासिल करने का काम सौंपा गया था: स्थिर पूर्व-रेंडर किए गए पेज बनाना जो कोडेक्स को अपने उपयोगकर्ताओं को पहले से कहीं अधिक तेजी से सेवा प्रदान करने में मदद करेगा।

"अरिन," कैप्टन लाइफसाइकिल की आवाज गुंबददार कक्ष में गूंज उठी, जिसने उसका ध्यान अपनी ओर खींचा। “आज, आप स्थैतिक प्रतिपादन की शक्ति का उपयोग करना सीखेंगे। यह केवल ज्ञान के बारे में नहीं है - यह उपयोगकर्ताओं की जरूरतों को पूरा करने के लिए कोडेक्स को तैयार करने के बारे में है, इससे पहले कि वे पैदा हों।"

एक सच्चे रक्षक के योग्य चुनौती, अरिन ने सोचा, दृढ़ संकल्प ने उसकी आँखों को रोशन कर दिया। अब एक ऐसी प्रणाली तैयार करने का समय आ गया है जो कोडेक्स को अपने पृष्ठों को पूर्व-रेंडर करने की अनुमति देगी, जिससे बुलाए जाने पर तत्काल प्रतिक्रिया सुनिश्चित हो सके।


1. पुरालेख तैयार करना - एमडीएक्स के साथ कस्टम एसएसजी का निर्माण

कैप्टन लाइफसाइकल अरिन के साथ-साथ चली, जब वह वॉल्ट में गहराई तक चली गई। डेटा से प्रकाशित स्क्रॉल, उपयोगकर्ता की आवश्यकता से बहुत पहले प्रदान की गई स्क्रिप्ट और पृष्ठों को प्रकट करते हैं। उन्होंने कहा, "कोडेक्स तैयार करने के लिए, हमें ज्ञान हासिल करना और उसे इन पन्नों में संग्रहित करना सीखना होगा।"

एरिन का कार्य स्पष्ट था: कोडेक्स के ब्लॉग के लिए एक स्टेटिक साइट जेनरेशन (एसएसजी) प्रणाली का निर्माण करना, जहां अतीत की कहानियों और पाठों को एक पल की सूचना पर बुलाया जा सकता था।

चरण 1: उपकरण इकट्ठा करना पहला कदम कोडेक्स को उसके स्क्रॉल-एमडीएक्स फाइलों को पढ़ने और संकलित करने के साधनों से लैस करना था।

एनपीएम इंस्टाल एफएस-एक्स्ट्रा रिएक्ट रिएक्ट-डोम रिएक्ट-डोम/सर्वर @mdx-js/react @mdx-js/mdx
npm install fs-extra react react-dom react-dom/server @mdx-js/react @mdx-js/mdx
जैसे ही अरिन ने घटकों को सक्रिय किया, कक्ष धीरे-धीरे गूंजने लगा। प्रत्येक स्थापना तिजोरी के बुनियादी ढांचे में खोदे गए एक रूण की तरह थी, जो इसे प्राचीन ग्रंथों की व्याख्या और प्रस्तुत करने के लिए तैयार कर रही थी।

चरण 2: पहला एमडीएक्स स्क्रॉल लिखना अरिन ने एक कलम उठाई और कोडेक्स का पहला ब्लॉग लिखना शुरू किया, जो इंटरैक्टिव रिएक्ट घटकों के साथ बुनी गई इसके इतिहास की एक कहानी है।

// blogs/hello-world.mdx # हैलो वर्ल्ड! कोडेक्स के पहले ब्लॉग पोस्ट में आपका स्वागत है। यह सामग्री एक एमडीएक्स फ़ाइल से प्रस्तुत की गई है, जो रिएक्ट घटकों की शक्ति के साथ मार्कडाउन की सादगी को जोड़ती है। यह MDX के भीतर एम्बेडेड एक विशेष रिएक्ट घटक है!
npm install fs-extra react react-dom react-dom/server @mdx-js/react @mdx-js/mdx
प्रत्येक स्ट्रोक के साथ, पृष्ठ चमकने लगा, इसकी सामग्री अब सरल पाठ और जटिल घटकों का मिश्रण है।

चरण 3: स्क्रॉल प्रस्तुत करने के लिए स्क्रिप्ट बनाना अरिन ने एक मंत्र तैयार किया - एक स्क्रिप्ट - जो स्क्रॉल को पढ़ेगी, उन्हें रिएक्ट घटकों में संकलित करेगी, और उन्हें स्थिर HTML के रूप में प्रस्तुत करेगी।

// generateStaticBlogs.js स्थिरांक एफएस = आवश्यकता('एफएस-अतिरिक्त'); स्थिरांक पथ = आवश्यकता('पथ'); स्थिरांक प्रतिक्रिया = आवश्यकता('प्रतिक्रिया'); const ReactDOMServer = require('react-dom/server'); const { MDXProvider } = require('@mdx-js/react'); const mdx = require('@mdx-js/mdx'); स्थिरांक आउटपुटपाथ = './स्थैतिक-ब्लॉग'; const blogPath = './blogs'; (async() => { कोशिश { // सुनिश्चित करें कि आउटपुट निर्देशिका मौजूद है प्रतीक्षा करें fs.ensureDir(आउटपुटपाथ); स्थिरांक blogFiles = प्रतीक्षा fs.readdir(ब्लॉगपाथ); के लिए (ब्लॉगफाइल्स की स्थिरांक फ़ाइल) { यदि (पथ.extname(फ़ाइल) === '.mdx') { स्थिरांक फ़ाइलपथ = पथ.जॉइन(ब्लॉगपाथ, फ़ाइल); स्थिरांक सामग्री = प्रतीक्षा करें fs.readFile(filePath, 'utf8'); स्थिरांक संकलितMdx = प्रतीक्षा mdx(सामग्री); स्थिरांक घटक = नया फ़ंक्शन ('प्रतिक्रिया', संकलितMdx)(प्रतिक्रिया); // घटक को एक स्थिर HTML स्ट्रिंग में प्रस्तुत करें const renderedBlog = ReactDOMServer.renderToString( ); स्थिरांक htmlTemplate = ` ${path.basename(फ़ाइल, '.mdx')}शीर्षक>

चरण 4: जादू चलाना अरिन ने स्क्रिप्ट का आह्वान करने के लिए मंत्र बुदबुदाया।

नोड generateStaticBlogs.js
npm install fs-extra react react-dom react-dom/server @mdx-js/react @mdx-js/mdx
उसने देखा कि स्टेटिक वॉल्ट जीवंत हो गए, प्रत्येक ब्लॉग धीरे-धीरे चमक रहा था क्योंकि यह उपयोगकर्ताओं को परोसने के लिए तैयार एक स्थिर पेज में बदल गया।

एरिन का प्रतिबिंब:
"ये स्थिर पन्ने सिर्फ गूँज से कहीं अधिक हैं," उसने तिजोरी को ज्ञान से चमकते हुए देखकर सोचा। “वे कोडेक्स की सेवा के लिए तत्पर हैं, तत्काल और अटूट।”


2. स्थैतिक तैयारी के पक्ष और विपक्ष

कैप्टन लाइफसाइकिल की आवाज हवा में गूंज गई। "याद रखें, अरिन, जबकि स्थिर पृष्ठ शक्तिशाली होते हैं, वे अपने स्वयं के ट्रेड-ऑफ के साथ आते हैं।"

पेशेवर:

  • तेज़ तेज़ लोड समय: पहले से रेंडर किए गए पेज तुरंत परोसे जाते हैं, जिससे उपयोगकर्ताओं को निर्बाध गति का भ्रम होता है।
  • एसईओ महारत: पूरी तरह से प्रस्तुत HTML यह सुनिश्चित करता है कि कोडेक्स की कहानियां अच्छी तरह से अनुक्रमित हैं, दृश्यता प्राप्त कर रही हैं।
  • डेवलपर-अनुकूल: एमडीएक्स समृद्ध रिएक्ट घटकों को मार्कडाउन के साथ-साथ रहने की अनुमति देता है, सरलता को अन्तरक्रियाशीलता के साथ मिश्रित करता है।

दोष:

  • पुनर्निर्माण: अपडेट के लिए कोडेक्स के पृष्ठों को फिर से बनाया जाना चाहिए, जिससे गतिशील सामग्री को प्रबंधित करना कठिन हो जाएगा।
  • प्रारंभिक निर्माण समय: सामग्री के बड़े संग्रह को तैयार होने में समय लग सकता है।

“यह एक पुरालेख तैयार करने जैसा है, अरिन,” कैप्टन लाइफसाइकल ने कहा, “नई कहानियां लिखे जाने पर इस पर ध्यान दिया जाना चाहिए और अद्यतन किया जाना चाहिए।”


3. वृद्धिशील स्थैतिक पुनर्जनन - अनुकूली रक्षक

“लेकिन कैप्टन,” अरिन की भौंहें सिकुड़ गईं, उसने सोचा, “क्या होगा अगर कोडेक्स को सब कुछ दोबारा लिखे बिना अपनी कहानियों को ताज़ा करने की ज़रूरत है?”

कैप्टन लाइफसाइकल ने सिर हिलाया।

"यही वह जगह है जहां वृद्धिशील स्थैतिक पुनर्जनन आता है। यह एक कीपर है जो आवश्यकतानुसार सामग्री को अद्यतन करता है, पूरे संग्रह को दोबारा बनाए बिना पृष्ठों को ताज़ा रखता है।"

नोड-क्रॉन के साथ अनुसूचित आईएसआर का उदाहरण: पृष्ठों को अद्यतन रखने के लिए, अरिन ने एक संरक्षक मंत्र पेश किया जो निर्धारित अंतराल पर चलता रहेगा।

npm नोड-क्रॉन स्थापित करें
npm install node-cron
const cron = require('node-cron'); cron.schedule('0 * * * *', () => { कंसोल.लॉग ('स्थैतिक पृष्ठों को पुन: उत्पन्न कर रहा है...'); आवश्यकता('./generateStaticBlogs'); }); कंसोल.लॉग ('अनुसूचित आईएसआर हर घंटे चल रहा है।');
npm install fs-extra react react-dom react-dom/server @mdx-js/react @mdx-js/mdx

एरिन की अंतर्दृष्टि:
"आईएसआर के साथ, कोडेक्स सिर्फ प्रतिक्रिया नहीं करता है - यह अनुकूलन करता है," उसने तत्परता की भावना महसूस करते हुए सोचा। “उपयोगकर्ता कोडेक्स को हमेशा अद्यतन पाएंगे, उनका मार्गदर्शन करने के लिए तैयार रहेंगे।”


निष्कर्ष: मिशन से परे

वॉल्ट शांत खड़े थे और उस ज्ञान से चमक रहे थे जो अरिन ने उनमें बुना था। कैप्टन लाइफ़साइकल ने उसके कंधे पर हाथ रखा, उसकी आँखों में गर्व साफ़ झलक रहा था।

“आपने कोडेक्स के सार को पूर्व-प्रस्तुत करना सीख लिया है। लेकिन याद रखें, हमारे दायरे से परे ऐसे उपकरण हैं जो इसे और भी आसान बनाते हैं।"

अरिन ने आगे का रास्ता समझते हुए सिर हिलाया।

“कोडेक्स के लिए, उपयोगकर्ताओं के लिए, हम तैयारी करते हैं, अनुकूलन करते हैं और हमेशा सेवा करते हैं।”


पाठकों के लिए महत्वपूर्ण नोट:

यहां दिए गए उदाहरण कस्टम एसएसआर और एसएसजी को समझने के लिए मौलिक दृष्टिकोण हैं। उत्पादन स्तर के अनुप्रयोगों के लिए,

Next.js, Remix, और Astro जैसे फ्रेमवर्क पर गौर करें जो प्री-रेंडरिंग के लिए अनुकूलित, सुरक्षित और स्केलेबल समाधान प्रदान करते हैं।

विज्ञप्ति वक्तव्य इस लेख को इस पर पुनर्मुद्रित किया गया है: https://dev.to/vigneshiyergithub/episode-10-the-great-pre- रेंडर-मेसिशन-एरिन्स-quest-for-custom-ssr-ssr-and-ssg-sastery-3p23?1 यदि कोई उल्लंघन है, तो कृपया इसे हटा दें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3