कई फ़्रंटएंड फ़्रेमवर्क सामग्री दिखाने के लिए JavaScript की मदद लेते हैं. इसकी वजह से Google आपकी सामग्री को इंडेक्स करने या इंडेक्स की गई सामग्री को अपडेट करने में समय ले सकता है.
इस साल
Google I/O में इस समस्या पर चर्चा हुई. इस चर्चा का नतीजा यह निकला कि
डायनामिक रेंडरिंग की मदद से इस समस्या को ठीक किया जा सकता है. डायनामिक रेंडरिंग कई तरीकों से लागू की जाती है. इस ब्लॉग पोस्ट में 'रेंडरट्रॉन' के ज़रिए डायनामिक रेंडरिंग का उदाहरण दिया गया है. 'रेंडरट्रॉन' ओपन सोर्स सॉफ़्टवेयर है, जिसमें 'हेडलेस Chromium' का इस्तेमाल होता है.
डायनामिक रेंडरिंग का इस्तेमाल किन साइटों को करना चाहिए?
आपकी वेबसाइट पर आने वाले सर्च इंजन या सोशल मीडिया के कुछ बॉट JavaScript नहीं चला सकते. Googlebot आपकी साइट की JavaScript चलाने में समय ले सकता है. साथ ही, इसे JavaScript चलाने में
दूसरी समस्याएं भी हो सकती हैं. ऐसी समस्याओं का एक उदाहरण नीचे दिया गया है.
डायनामिक रेंडरिंग उस सामग्री के लिए मददगार साबित हो सकती है, जो अक्सर बदलती रहती है और जिसे दिखाने के लिए JavaScript की ज़रूरत होती है.
हाइब्रिड रेंडरिंग (उदाहरण के लिए,
Angular Universal) का इस्तेमाल करने से आपकी साइट का उपयोगकर्ता अनुभव बेहतर हो सकता है. इससे खास तौर पर,
फ़र्स्ट मीनिंगफ़ुल पेंट (पेज की मुख्य सामग्री दिखने) में लगने वाला समय) कम होता है.
डायनामिक रेंडरिंग कैसे काम करती है?
डायनामिक रेंडरिंग का इस्तेमाल खास तरह के उपयोगकर्ता एजेंट के लिए होता है. इस सुविधा के ज़रिए पहले से रेंडर की गई सामग्री और उपयोगकर्ता के ब्राउज़र पर रेंडर की गई सामग्री के बीच स्विच किया जाता है.
आपको JavaScript चलाने और स्टैटिक एचटीएमएल दिखाने लिए रेंडरर की ज़रूरत होगी. रेंडरर एक ओपन सोर्स प्रोजेक्ट होता है, जिसमें
हेडलेस Chromium से सामग्री को रेंडर किया जाता है. एक पेज वाले ऐप्लिकेशन सामग्रियों को रेंडर करने के लिए, अक्सर डेटा को बैकग्राउंड में लोड करते हैं या मौजूदा प्रक्रिया को रोक देते हैं. 'रेंडरट्रॉन' से यह पता लगाया जा सकता है कि वेबसाइट की रेंडरिंग कब पूरी हुई. 'रेंडरट्रॉन' अपनी गतिविधि शुरू करने से पहले, नेटवर्क के सभी अनुरोध और चल रही प्रक्रियाओं के पूरा होने का इंतज़ार करता है.
इस पोस्ट में नीचे दी गईं चीज़ों के बारे में जानकारी दी गई है:
- वेब ऐप्लिकेशन के नमूने को देखना
- वेब ऐप्लिकेशन के इस्तेमाल के लिए छोटा express.js सर्वर सेट अप करना
- डायनामिक रेंडरिंग के लिए 'रेंडरट्रॉन' को मिडलवेयर (ऑपरेटिंग सिस्टम और सॉफ़्टवेयर के बीच काम करने वाला सॉफ़्टवेयर) के रूप में इंस्टॉल और कॉन्फ़िगर करना
वेब ऐप्लिकेशन का नमूना
“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) का इस्तेमाल करता है. हालांकि, अभी आधुनिक JavaScript के साथ
Googlebot काम नहीं करता. हम
मोबाइल-फ़्रेंडली टेस्ट से जान सकते हैं कि Googlebot इस वेब ऐप्लिकेशन की सामग्री देख सकता है या नहीं:
 |
| मोबाइल-फ़्रेंडली टेस्ट से पता चलता है कि यह पेज मोबाइल पर सही तरीके से काम कर सकता है. हालांकि, स्क्रीनशॉट में बिल्लियों की फ़ोटो मौजूद नहीं हैं! स्क्रीनशॉट में पेज का शीर्षक और बटन दिखाई देते हैं, लेकिन इसमें बिल्लियों की तस्वीरें दिखाई नहीं देतीं. |
हालांकि, यह समस्या आसानी से ठीक की जा सकती है, लेकिन डायनामिक रेंडरिंग को सेटअप करने का तरीका जानना बेहतर रहेगा. डायनामिक रेंडरिंग से वेब ऐप्लिकेशन के कोड में बदलाव किए बिना Googlebot बिल्लियों की फ़ोटो देख पाएगा.
सर्वर को सेट अप करना
आइए, वेब ऐप्लिकेशन के लिए
express का इस्तेमाल करें, जो node.js की लाइब्रेरी है. इसकी मदद से हम वेब सर्वर को सेट अप कर पाएंगे.
सर्वर का कोड कुछ ऐसा दिखता है (
प्रोजेक्ट का पूरा सोर्स कोड यहां देखें):
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 http://localhost:${PORT} from ${DIST_FOLDER}`);
});
आप
लाइव पेज को यहां देख सकते हैं - अगर आप नए ब्राउज़र का इस्तेमाल कर रहे हैं, तो आपको बिल्लियों की कई तस्वीरें दिखाई देंगी. अपने कंप्यूटर पर प्रोजेक्ट चलाने के लिए आपको
node.js की ज़रूरत पड़ेगी, तभी आप नीचे दिए गए कमांड चला पाएंगे:
npm install --save express rendertron-middleware
node server.js
इसके बाद, अपने ब्राउज़र को
http://localhost:8080 पर लेकर जाएं. अब डायनामिक रेंडरिंग को सेट अप करें.
'रेंडरट्रॉन' का इंस्टेंस जोड़ना
'रेंडरट्रॉन' एक सर्वर के तौर पर काम करता है, जिसमें यूआरएल डाला जाता है. इसके बाद, 'हेडलेस Chromium' के इस्तेमाल से उस यूआरएल से स्टैटिक एचटीएमएल कोड मिलता है. हम
'रेंडरट्रॉन' प्रोजेक्ट के लिए मिले सुझाव का पालन करेंगे और
Google Cloud Platform का इस्तेमाल करेंगे.
 |
| Google Cloud Platform पर नया प्रोजेक्ट शुरू करने के लिए फ़ॉर्म. |
कृपया ध्यान रखें कि शुरुआत में आप Google Cloud Platform पर
मुफ़्त में इस्तेमाल करने की सुविधा का इस्तेमाल कर सकते हैं. हालांकि, अपने प्रोजेक्ट के लिए इस सेटअप को इस्तेमाल करने पर, आपको
Google Cloud Platform की तय कीमतों के हिसाब से पैसे चुकाने पड़ सकते हैं.
- Google Cloud console पर नया प्रोजेक्ट बनाएं. जानकारी डालने के लिए बने फ़ील्ड के नीचे दिए गए "प्रोजेक्ट आईडी" को अपने पास लिखकर रखें.
- दस्तावेज़ में बताए गए तरीके से Google Cloud SDK को इंस्टॉल करें और इसमें लॉग इन करें.
- GitHub से 'रेंडरट्रॉन' के रिपॉज़िटरी (मेमोरी की वह जगह, जहां सॉफ़्टवेयर का पैकेज सेव किया जाता है) को क्लोन करें. इसके लिए निम्नलिखित का इस्तेमाल करें:
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
- अपने कंप्यूटर पर दूसरे ज़रूरी सॉफ़्यवेयर इंस्टॉल करने और 'रेंडरट्रॉन' को सेट अप करने के लिए नीचे दिए गए कमांड चलाएं:
npm install && npm run build
- 'रेंडरट्रॉन' की कैश मेमोरी को चालू करने के लिए 'रेंडरट्रॉन' की डायरेक्टरी में config.json नाम से नई फ़ाइल बनाएं और उस फ़ाइल में नीचे दी गई सामग्री शामिल करें:
{ "datastoreCache": true }
- 'रेंडरट्रॉन' की डायरेक्टरी से नीचे दिया गया कमांड चलाएं. YOUR_PROJECT_ID की जगह पहले कदम में सेव किया गया अपना प्रोजेक्ट आईडी डालें.
gcloud app deploy app.yaml --project
YOUR_PROJECT_ID
- अपनी पसंद का देश चुनें और उसे जोड़ने की पुष्टि करें. प्रक्रिया पूरी होने तक इंतज़ार करें.
- अपने ब्राउज़र में YOUR_PROJECT_ID.appspot.com यूआरएल डालें. पहले कदम में मिले अपने असली प्रोजेक्ट आईडी को YOUR_PROJECT_ID की जगह डालें. आपको 'रेंडरट्रॉन' का इंटरफ़ेस दिखाई देगा, जिसमें जानकारी डालने के लिए एक फ़ील्ड और कुछ बटन होंगे.
 |
| Google Cloud Platform पर जोड़ने के बाद 'रेंडरट्रॉन' का यूज़र इंटरफ़ेस |
अपने 'रेंडरट्रॉन' के इंस्टेंस को सही तरीके से जोड़ने के बाद आपको 'रेंडरट्रॉन' का वेब इंटरफ़ेस दिखाई देगा. अपने प्रोजेक्ट के यूआरएल (YOUR_PROJECT_ID.appspot.com) को अपने पास लिखकर रखें क्योंकि प्रक्रिया के अगले हिस्से में आपको इसकी ज़रूरत पड़ेगी.
'रेंडरट्रॉन' को सर्वर पर जोड़ना
वेब सर्वर पर express.js का इस्तेमाल किया जा रहा है और 'रेंडरट्रॉन' पर express.js मिडलवेयर का इस्तेमाल होता है. server.js फ़ाइल की डायरेक्टरी में नीचे दिया गया कमांड चलाएं:
npm install --save rendertron-middleware
यह कमांड एनपीएम से 'रेंडरट्रॉन'-मिडलवेयर को इंस्टॉल करता है, ताकि हम उसे सर्वर से जोड़ सकें:
const express = require('express');
const app = express();
const rendertron = require('rendertron-middleware');
बॉट की सूची को कॉन्फ़िगर करना
उपयोगकर्ता एजेंट के एचटीटीपी हेडर का इस्तेमाल करके, 'रेंडरट्रॉन' यह पता लगाता है कि अनुरोध किसी बॉट ने किया है या वह उपयोगकर्ता के ब्राउज़र से आया है. 'रेंडरट्रॉन' के पास
बॉट के उपयोगकर्ता एजेंट की व्यवस्थित सूची होती है, जिनसे वह अनुरोधों में आए उपयोगकर्ता एजेंट की तुलना करता है. इस सूची में पहले से Googlebot को शामिल नहीं किया जाता क्योंकि JavaScript को Googlebot चला सकता है. अगर आप चाहते हैं कि 'रेंडरट्रॉन' Googlebot के अनुरोधों को भी रेंडर करे, तो उपयोगकर्ता एजेंट की सूची में Googlebot को भी शामिल कर लें.
const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');
बाद में 'रेंडरट्रॉन' उपयोगकर्ता एजेंट के हेडर की तुलना रेगुलर एक्सप्रेशन से करता है.
मिडलवेयर जोड़ना
बॉट के अनुरोध 'रेंडरट्रॉन' के इंस्टेंस को भेजने के लिए, हमें express.js सर्वर पर मिडलवेयर जोड़ना होगा. मिडलवेयर अनुरोध करने वाले उपयोगकर्ता एजेंट की जाँच करता है. साथ ही, जिन बॉट के बारे में मिडलवेयर को पहले से जानकारी होती है, उनके अनुरोध को वह 'रेंडरट्रॉन' के इंस्टेंस को भेजता है. नीचे दिए गए कोड को server.js पर जोड़ें और “your_rendertron” की जगह Google Cloud Platform प्रोजेक्ट का अपना आईडी डालना न भूलें:
app.use(rendertron.makeMiddleware({
proxyUrl: 'https://YOUR_PROJECT_ID.appspot.com/render',
userAgentPattern: BOT_UA_PATTERN
}));
जो बॉट वेबसाइट के नमूने का अनुरोध करते हैं, उन्हें 'रेंडरट्रॉन' के ज़रिए स्टैटिक एचटीएमएल भेजा जाता है. इससे बॉट को सामग्री दिखाने के लिए JavaScript की ज़रूरत नहीं होती.
सेटअप की जाँच करना
'रेंडरट्रॉन' सही से सेटअप हुआ है या नहीं, यह पता लगाने के लिए फिर से मोबाइल-फ़्रेंडली टेस्ट करें.
पिछले टेस्ट के नतीजों से अलग, इस बार बिल्लियों की तस्वीरें दिखाई देती हैं. हम जेनरेट किए गए सभी एचटीएमएल और JavaScript के कोड को एचटीएमएल टैब में देख सकते हैं. साथ ही, हम देख पाते हैं कि 'रेंडरट्रॉन' की वजह से अब सामग्रियों को दिखाने के लिए JavaScript की ज़रूरत नहीं होती.
नतीजा
आपने वेब ऐप्लिकेशन में बिना कोई बदलाव किए डायनामिक रेंडरिंग का सेटअप बनाया. इस बदलाव के बाद आप क्रॉलर को वेब ऐप्लिकेशन का स्टैटिक एचटीएमएल वर्शन दिखा सकते हैं.
Open Web Unicorn के मार्टिन स्प्लिट ने पोस्ट किया
