🤽🏼 🎒 🔇 ReactJS, सर्वर साइड रेंडरिंग और प्रोसेसिंग पेज मेटा टैग की कुछ सूक्ष्मताएं 💇🏾 👩‍🚒 📧

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

Google पर शुरू होने के बाद, पहला समाधान जिसे आप ले जाएंगे , सबसे अधिक संभावना है रिएक्ट हेलमेट ।

लाइब्रेरी के फायदों में से एक यह है कि इसे किसी भी तरह से आइसोमॉर्फिक माना जा सकता है और क्लाइंट साइड और सर्वर साइड दोनों पर पूरी तरह से इस्तेमाल किया जा सकता है।

class Page extends Component { render() { return ( <div> <Helmet> <title>Turbo Todo</title> <meta name="theme-color" content="#008f68" /> </Helmet> {/* ... */} </div> ); } }

सर्वर पर, राउटर इस तरह दिखेगा:

 app.get('/*', (req, res) => { const html = renderToString(<App />); const helmet = Helmet.renderStatic(); res.send(` <!doctype html> <html ${helmet.htmlAttributes.toString()}> <head> ${helmet.title.toString()} ${helmet.meta.toString()} </head> <body ${helmet.bodyAttributes.toString()}> <div id="app">${html}</div> </body> </html> `); });

ये दोनों स्निपेट्स पूरी तरह से सही और कुशल हैं, लेकिन एक BUT है, सर्वर के लिए उपरोक्त कोड पूरी तरह से सिंक्रोनस है और इसलिए पूरी तरह से सुरक्षित है, लेकिन अगर यह एसिंक्रोनस हो जाता है, तो यह अपने आप में कठिन डिबग किए गए कीड़ों को छिपा देगा:

 app.get('/*', async (req, res) => { // .... await anyAsyncAction(); //.... const helmet = Helmet.renderStatic(); // ... });

यहां समस्या मुख्य रूप से रिएक्ट हेलमेट लाइब्रेरी में ही है और विशेष रूप से, इसमें वह रिएक्ट ट्री के अंदर सभी टैग एकत्र करता है और इसे वास्तव में एक वैश्विक चर में डालता है, और चूंकि कोड अतुल्यकालिक हो गया है, कोड विभिन्न उपयोगकर्ताओं से संसाधित अनुरोधों को मिला सकता है।

यहाँ अच्छी खबर यह है कि इस पुस्तकालय के आधार पर एक कांटा बनाया गया था और अब यह प्रतिक्रिया-हेलमेट-एसिंक्स लाइब्रेरी को वरीयता देना बेहतर है। इसमें मुख्य प्रतिमान यह है कि इस मामले में, प्रतिक्रिया-हेलमेट संदर्भ को हेल्मेटप्रोविडर में रिएक्ट ट्री एप्लिकेशन को एनकैप करके एकल अनुरोध के ढांचे के भीतर अलग किया जाएगा:

 import { Helmet, HelmetProvider } from 'react-helmet-async'; app.get('/*', async (req, res) => { // ... code may content any async actions const helmetContext = {}; const app = ( <HelmetProvider context={helmetContext}> <App/> </HelmetProvider> ); // ...code may content any async actions const html = renderToString(app); const { helmet } = helmetContext; // ...code may content any async actions });

यह समाप्त हो सकता है, लेकिन शायद आप अधिकतम प्रदर्शन को निचोड़ने और कुछ एसईओ मैट्रिक्स में सुधार करने के प्रयास में आगे बढ़ेंगे। उदाहरण के लिए, आप टाइम टू फर्स्ट बाइट (TTFB) मेट्रिक में सुधार कर सकते हैं - जब सर्वर पेज लेआउट को चंक्स के साथ भेज सकते हैं क्योंकि उनकी गणना की जाती है, बजाय इसके कि पूरी तरह से गणना होने तक प्रतीक्षा करें। ऐसा करने के लिए, आप renderToString के बजाय रेंडरटाउन कोड का उपयोग करना शुरू कर देंगे।

यहाँ हम फिर से एक छोटी सी समस्या का सामना कर रहे हैं। एक पेज की जरूरत के सभी मेटा टैग प्राप्त करने के लिए, हमें पूरे एप्लिकेशन रिएक्शन ट्री के माध्यम से जाना चाहिए, लेकिन समस्या यह है कि मेटा टैग्स को उस समय से पहले भेजा जाना चाहिए जब हम रेंडरटाउन नोस्टोड्रीम का उपयोग करके सामग्री स्ट्रीमिंग शुरू करते हैं। वास्तव में, हमें फिर दो बार रिएक्ट ट्री की गणना करने की आवश्यकता है और यह कुछ इस तरह दिखता है:

 app.get('/*', async (req, res) => { const helmetContext = {}; let app = ( <HelmetProvider context={helmetContext}> <App/> </HelmetProvider> ); // do a first pass render so that react-helmet-async // can see what meta tags to render ReactDOMServer.renderToString(app); const { helmet } = helmetContext; response.write(` <html> <head> ${helmet.title.toString()} ${helmet.meta.toString()} </head> <body> `); const stream = ReactDOMServer.renderToNodeStream(app); stream.pipe(response, { end: false }); stream.on('end', () => response.end('</body></html>')); });

इस तरह के दृष्टिकोण के साथ, इस तरह के अनुकूलन की आवश्यकता सिद्धांत रूप में एक बड़ा सवाल बन जाती है और यह संभव नहीं है कि हम जिस TTFB मीट्रिक को प्राप्त करना चाहते हैं, उसमें सुधार करेंगे।

यहां हम थोड़ा अनुकूलन खेल सकते हैं और कई विकल्प हैं

रेंडरटॉस्ट्रिंग रेंडर के बजाय रेंडरटॉइस्टमैटिकअप का उपयोग करें, जो संभवत: कुछ समय के लिए कुछ हद तक जीतने में मदद करेगा
बॉक्स से प्रतिक्रिया द्वारा प्रस्तुत रेंडरर्स का उपयोग करने के बजाय, प्रतिक्रिया पेड़ के माध्यम से पारित होने के अपने स्वयं के प्रकाश संस्करण के साथ आते हैं, उदाहरण के लिए, प्रतिक्रिया-ट्री-वॉकर लाइब्रेरी के आधार पर, या पेड़ को पूरी तरह से प्रस्तुत करने से इनकार करते हैं और केवल पेड़ के पहले स्तर पर देखते हैं, एम्बेडेड घटकों पर ध्यान नहीं दे रहे हैं, इसलिए उथला प्रतिपादन
एक कैशिंग सिस्टम पर विचार करें जो कभी-कभी प्रतिक्रिया पेड़ के माध्यम से पहला चलना छोड़ सकता है

लेकिन किसी भी मामले में, वर्णित सब कुछ बहुत परिष्कृत लगता है और, सिद्धांत रूप में, दक्षता के लिए इस दौड़ पर संदेह करता है, जब कुछ असामान्य रूप से जटिल वास्तुकला एक-दो मिली सेकंड में बनती है।

यह मुझे इस मामले में लगता है, उन लोगों के लिए जो एसएसआर के लिए प्रतिपादन के लिए डेटा निकालने के तरीके से परिचित हैं (और यदि कोई नहीं जानता है, तो इस विषय पर यह एक उत्कृष्ट लेख है ), हम पेज के लिए मेटा टैग निकालने के उसी तरीके से जाने में मदद करेंगे।

सामान्य अवधारणा यह है कि हमारे पास राउटर के लिए एक कॉन्फ़िगरेशन फ़ाइल है - यह एक सामान्य जेएस संरचना है, जो वस्तुओं की एक सरणी है, जिनमें से प्रत्येक में घटक , पथ के कई फ़ील्ड शामिल हैं। अनुरोध url के आधार पर, हम कॉन्फ़िगरेशन फ़ाइल से राउटर और घटक को इसके साथ जोड़ते हैं। इन घटकों के लिए, हम स्टैटिक विधियों के एक सेट को परिभाषित करते हैं जैसे लोडडाटा और, उदाहरण के लिए, हमारे मेटा टैग के लिए createMetatags ।

इस प्रकार, पेज कंपोनेंट खुद इस तरह बन जाएगा:

 class ProductPage extends React.Component { static createMetatags(store, request){ const item = selectItem(store, request.params.product_id); return [] .concat({property: 'og:description', content: item.desc}) .concat({property: 'og:title', content: item.title}) } static loadData(store, request){ // extract external data for SSR and return Promise } // the rest of component }

हमने एक स्थैतिक createMetatags विधि निर्धारित की है जो मेटा टैग के लिए आवश्यक सेट बनाता है। इसे ध्यान में रखते हुए, सर्वर पर कोड इस तरह बन जाएगा:

 app.get('/*', async (req, res) => { const store = createStore(); const matchedRoutes = matchRoutes(routes, request.path); // load app state await Promise.all( matchedRoutes.reduce((promises, { route }) => { return route.component.loadData ? promises.concat(route.component.loadData(store, req)) : promises; }, []) ); // to get metatags const metaTags = matchedRoutes.reduce((tags, {route}) => { return route.component.createMetatags ? tags.concat(route.component.createMetatags(store, req)): tags }); res.write(` <html> <head> ${ReactDOMServer.renderToString(() => metaTags.map(tag => <meta {...tag}/>) )} </head> <body> `); const stream = ReactDOMServer.renderToNodeStream(app); stream.pipe(response, { end: false }); stream.on('end', () => response.end('</body></html>')); });

यानी अब हमें रिएक्ट ट्री को दो बार प्रस्तुत करने की आवश्यकता नहीं है - हम एक मार्ग के लिए डेटा निष्कर्षण के साथ सादृश्य द्वारा, एक आइसोमोर्फिक एप्लिकेशन से काम करने के लिए आवश्यक सभी चीज़ों को तुरंत निकाल सकते हैं।

ReactJS, सर्वर साइड रेंडरिंग और प्रोसेसिंग पेज मेटा टैग की कुछ सूक्ष्मताएं

More articles: