'रेंडरट्रॉन' की मदद से डाइनैमिक रेंडरिंग लागू करना

गुरुवार, 31 जनवरी, 2019

कई फ़्रंटएंड फ़्रेमवर्क, कॉन्टेंट दिखाने के लिए JavaScript की मदद लेते हैं. इसकी वजह से, Google आपके कॉन्टेंट को इंडेक्स करने या इंडेक्स किए गए कॉन्टेंट को अपडेट करने में, समय ले सकता है.

इस साल Google I/O में इस समस्या पर चर्चा हुई. इस चर्चा का नतीजा यह निकला कि डाइनैमिक रेंडरिंग की मदद से, इस समस्या को ठीक किया जा सकता है. डाइनैमिक रेंडरिंग को कई तरीकों से लागू किया जा सकता है. इस ब्लॉग पोस्ट में Rendertron के ज़रिए, डाइनैमिक रेंडरिंग को लूगा करने का उदाहरण दिया गया है. यह, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chromium ब्राउज़र पर बना हुआ एक ओपन सोर्स सॉफ़्टवेयर है.

किन साइटों को डाइनैमिक रेंडरिंग का इस्तेमाल करना चाहिए?

सभी सर्च इंजन या आपकी वेबसाइट पर आने वाले सोशल मीडिया के कुछ बॉट, JavaScript नहीं चला सकते. उदाहरण के लिए, Googlebot को आपकी साइट की JavaScript चलाने में समय लग सकता है और इसकी भी कुछ सीमाएं हैं.

डाइनैमिक रेंडरिंग ऐसे कॉन्टेंट के लिए मददगार हो सकती है, जो अक्सर बदलता रहता है और जिसे दिखाने के लिए JavaScript की ज़रूरत होती है. हाइब्रिड रेंडरिंग, जैसे कि Angular Universal का इस्तेमाल करने से, आपकी साइट पर उपयोगकर्ताओं का अनुभव बेहतर हो सकता है. इससे खास तौर पर, फ़र्स्ट मीनिंगफ़ुल पेंट (पेज का मुख्य कॉन्टेंट दिखने में लगने वाला समय) कम होता है.

डाइनैमिक रेंडरिंग कैसे काम करती है?

डाइनैमिक रेंडरिंग का इस्तेमाल पहले से रेंडर किए गए कॉन्टेंट और उपयोगकर्ता के ब्राउज़र पर रेंडर किए गए कॉन्टेंट के बीच स्विच करने के लिए किया जाता है.

JavaScript को एक्ज़ीक्यूट करने और स्टैटिक एचटीएमएल बनाने के लिए, आपको रेंडरर की ज़रूरत होगी. Rendertron बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chromium ब्राउज़र पर बना हुआ एक ओपन सोर्स सॉफ़्टवेयर है. एक पेज वाले ऐप्लिकेशन कॉन्टेंट को रेंडर करने के लिए, अक्सर डेटा को बैकग्राउंड में लोड करते हैं या मौजूदा प्रोसेस को रोक देते हैं. Rendertron से यह पता लगाया जा सकता है कि वेबसाइट की रेंडरिंग कब पूरी हुई. Rednertron अपना काम शुरू करने से पहले, नेटवर्क के सभी अनुरोध और चल रही प्रोसेस के पूरा होने का इंतज़ार करता है.

इस पोस्ट में नीचे दिए गए विषयों के बारे में जानकारी दी गई है:

सैंपल के तौर पर बनाए गए वेब ऐप्लिकेशन को देखना
वेब ऐप्लिकेशन के इस्तेमाल के लिए, छोटा express.js सर्वर सेट अप करना
डाइनैमिक रेंडरिंग के लिए Rendertron को मिडलवेयर के रूप में इंस्टॉल और कॉन्फ़िगर करना

वेब ऐप्लिकेशन का सैंपल

"kitten corner" वेब ऐप्लिकेशन JavaScript का इस्तेमाल करके, बिल्लियों की कई तरह की इमेज को एपीआई से लोड करके उन्हें ग्रिड में दिखाता है.

ग्रिड के तौर पर दिख रही बिल्लियों की प्यारी इमेज. साथ ही, अन्य इमेज देखने के लिए बटन भी मौजूद है - ये सारी चीज़ें एक वेब ऐप्लिकेशन में होनी चाहिए!

यहां इस वेब ऐप्लिकेशन की JavaScript दी गई है:

const apiUrl = 'https://api.thecatapi.com/v1/images/search?limit=50';
   const tpl = document.querySelector('template').content;
   const container = document.querySelector('ul');
   function init () {
     fetch(apiUrl)
     .then(response => response.json())
     .then(cats => {
       container.innerHTML = '';
       cats
         .map(cat => { const li = document.importNode(tpl, true); li.querySelector('img').src = cat.url; return li;
         }).forEach(li => container.appendChild(li));
     })
   }
   init();
   document.querySelector('button').addEventListener('click', init);

इस वेब ऐप्लिकेशन में आधुनिक JavaScript (ES6) का इस्तेमाल होता है. यह फ़िलहाल Googlebot में काम नहीं करता. हम मोबाइल-फ़्रेंडली जांच का इस्तेमाल करके, यह देख सकते हैं कि Googlebot, इस कॉन्टेंट को देख सकता है या नहीं:

इमेज में मोबाइल-फ़्रेंडली जांच के नतीजे दिखाए गए हैं. इससे, पता चल रहा है कि यह पेज मोबाइल पर सही तरीके से काम कर रहा है. हालांकि, स्क्रीनशॉट में
बिल्लियों की फ़ोटो नहीं दिख रही है! स्क्रीनशॉट में पेज का शीर्षक और बटन दिख रहे हैं, लेकिन बिल्लियों की फ़ोटो
नहीं दिख रही है.

हालांकि, यह समस्या आसानी से ठीक की जा सकती है, लेकिन सबसे पहले डाइनैमिक रेंडरिंग को सेट अप करने का तरीका जानना बेहतर रहेगा. डाइनैमिक रेंडरिंग की मदद से Googlebot, वेब ऐप्लिकेशन के कोड में बदलाव किए बिना बिल्लियों की फ़ोटो देख सकेगा.

सर्वर को सेट अप करना

वेब ऐप्लिकेशन पर काम करने वाला वेब सर्वर बनाने के लिए, node.js लाइब्रेरी के express का इस्तेमाल करें.

सर्वर कोड ऐसा दिखेगा- पूरे प्रोजेक्ट का सोर्स कोड यहां देखें:

const express = require('express');
const app = express();
const DIST_FOLDER = process.cwd() + '/docs';
const PORT = process.env.PORT || 8080;
// Serve static assets (images, css, etc.)
app.get('*.*', express.static(DIST_FOLDER));
// Point all other URLs to index.html for our single page app
app.get('*', (req, res) => {
  res.sendFile(DIST_FOLDER + '/index.html');
});
// Start Express Server
app.listen(PORT, () => {
  console.log(`Node Express server listening on https://localhost:${PORT} from ${DIST_FOLDER}`);
});

यहां लाइव उदाहरण को आज़माया जा सकता है - अगर आधुनिक ब्राउज़र का इस्तेमाल किया जा रहा है, तो आपको बिल्लियों की कई फ़ोटो दिखनी चाहिए. अपने कंप्यूटर से प्रोजेक्ट चलाने के लिए, आपको node.js की ज़रूरत पड़ेगी, ताकि ये निर्देश सही से काम कर सकें:

npm install --save express rendertron-middleware
node server.js

इसके बाद, अपने ब्राउज़र पर https://localhost:8080 खोजें. अब डाइनैमिक रेंडरिंग को सेट अप करें.

Rendertron का इंस्टेंस जोड़ना

Rendertron एक सर्वर के तौर पर काम करता है, जिसमें यूआरएल डाला जाता है. इसके बाद, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chromium ब्राउज़र के इस्तेमाल से उस यूआरएल से स्टैटिक एचटीएमएल कोड मिलता है. हम Rendertron प्रोजेक्ट के लिए मिले सुझाव का पालन करेंगे और Google Cloud Platform का इस्तेमाल करेंगे.

Google Cloud Platform पर नया प्रोजेक्ट शुरू करने के लिए फ़ॉर्म.

कृपया ध्यान दें कि मुफ़्त में इस्तेमाल करने की सुविधा के साथ शुरुआत की जा सकती है. प्रोडक्शन में इस सेट अप का इस्तेमाल करने पर, Google Cloud Platform की कीमत के हिसाब से पैसे चुकाने पड़ सकते हैं.

Google Cloud Console में एक नया प्रोजेक्ट बनाएं. इनपुट फ़ील्ड के नीचे मौजूद "प्रोजेक्ट आईडी" को अपने पास लिखकर रखें.
दस्तावेज़ में बताए गए तरीके से Google Cloud SDK टूल को इंस्टॉल करें और लॉग इन करें.
GitHub से Rendertron के डेटा स्टोर करने की जगह को क्लोन करें:
```
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
```
अपने कंप्यूटर पर दूसरे ज़रूरी सॉफ़्यवेयर इंस्टॉल करने और Rendertron को सेट अप करने के लिए यहां दिए गए कमांड चलाएं:
```
npm install && npm run build
```
Rendertron की कैश मेमोरी को चालू करने के लिए, Rendertron डायरेक्ट्री में config.json नाम से नई फ़ाइल बनाएं और उस फ़ाइल में यहां दिए गए कॉन्टेंट को शामिल करें:
```
{ "datastoreCache": true }
```
Rendertron की डायरेक्टरी से नीचे दिया गया कमांड चलाएं. पहले चरण में YOUR_PROJECT_ID की जगह अपना प्रोजेक्ट आईडी डालें.
```
gcloud app deploy app.yaml --project YOUR_PROJECT_ID
```
अपनी पसंद का क्षेत्र चुनें और उसे जोड़ने की पुष्टि करें. प्रक्रिया पूरी होने तक इंतज़ार करें.
यूआरएल YOUR_PROJECT_ID.appspot.com डालें. आपको Rendertron का इंटरफ़ेस दिखेगा, जिसमें जानकारी डालने के लिए इनपुट फ़ील्ड और कुछ बटन होंगे.

Google Cloud Platform पर जोड़ने के बाद Rendertron का यूज़र इंटरफ़ेस (यूआई)

अपने Rendertron के इंस्टेंस को सही तरीके से जोड़ने के बाद, आपको Rendertron का वेब इंटरफ़ेस दिखेगा. अपने प्रोजेक्ट के यूआरएल (YOUR_PROJECT_ID.appspot.com) को लिखकर रखें, क्योंकि प्रोसेस के अगले हिस्से में आपको इसकी ज़रूरत पड़ेगी.

Rendertron को सर्वर पर जोड़ना

वेब सर्वर express.js का इस्तेमाल कर रहा है. Rendertron पर express.js मिडलवेयर का इस्तेमाल होता है. server.js फ़ाइल की डायरेक्ट्री में यह कमांड चलाएं:

npm install --save rendertron-middleware

यह कमांड NPM से Rendertron मिडलवेयर को इंस्टॉल करता है, ताकि हम उसे सर्वर से जोड़ सकें:

const express = require('express');
const app = express();
const rendertron = require('rendertron-middleware');

बॉट की सूची को कॉन्फ़िगर करना

user-agent के एचटीटीपी हेडर का इस्तेमाल करके, Rendertron यह तय करता है कि अनुरोध किसी बॉट से आया है या किसी उपयोगकर्ता के ब्राउज़र से. Rendertron के पास बॉट के उपयोगकर्ता एजेंट की बेहतर सूची होती है, जिससे अनुरोधों की तुलना की जा सकती है. इस सूची में डिफ़ॉल्ट रूप से Googlebot को शामिल नहीं किया जाता, क्योंकि JavaScript को Googlebot चला सकता है. अगर आपको Rendertron से Googlebot के अनुरोधों को भी रेंडर करना है, तो उपयोगकर्ता एजेंट की सूची में Googlebot को भी शामिल करें:

const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

बाद में Rendertron user-agent के हेडर की तुलना इस रेगुलर एक्सप्रेशन से करता है.

मिडलवेयर जोड़ना

बॉट के अनुरोध Rendertron के इंस्टेंस को भेजने के लिए, हमें अपने express.js सर्वर पर मिडलवेयर जोड़ना होगा. मिडलवेयर अनुरोध करने वाले उपयोगकर्ता एजेंट की जांच करता है. साथ ही, जिन बॉट के बारे में मिडलवेयर को पहले से जानकारी होती है, उनके अनुरोध को वह Rendertron के इंस्टेंस को भेजता है. नीचे दिए गए कोड को Server.js में जोड़ें और YOUR_PROJECT_ID की जगह Google Cloud Platform का प्रोजेक्ट आईडी डालना न भूलें:

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://YOUR_PROJECT_ID.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

जो बॉट वेबसाइट के नमूने का अनुरोध करते हैं, उन्हें Rendertron के ज़रिए स्टैटिक एचटीएमएल भेजा जाता है. इससे बॉट को कॉन्टेंट दिखाने के लिए JavaScript की ज़रूरत नहीं होती.

सेट अप की जांच करना

Rendertron सही से सेट अप हुआ है या नहीं, यह पता लगाने के लिए फिर से मोबाइल-फ़्रेंडली जांच करें.

मोबाइल-फ़्रेंडली जांच से पता चलता है कि यह पेज मोबाइल-फ़्रेंडली है और अब, इस स्क्रीनशॉट में
सभी बिल्लियां मौजूद हैं!

पिछले टेस्ट के नतीजों से अलग, इस बार बिल्लियों की तस्वीरें दिख रही हैं. हम जनरेट किए गए सभी एचटीएमएल और JavaScript के कोड को एचटीएमएल टैब में देख सकते हैं. साथ ही, हम देख पाते हैं कि Rendertron की वजह से, अब कॉन्टेंट को दिखाने के लिए JavaScript की ज़रूरत नहीं होती.

नतीजा

आपने वेब ऐप्लिकेशन में बिना कोई बदलाव किए, डाइनैमिक रेंडरिंग सेट अप बनाया है. इन बदलावों के साथ, क्रॉलर को वेब ऐप्लिकेशन का स्टैटिक एचटीएमएल वर्शन दिखाया जा सकता है.

इसे Open Web Unicorn के मार्टिन स्प्लिट ने पोस्ट किया है