العرض الديناميكي باستخدام Rendertron

الخميس 31 كانون الثاني (يناير) 2019

تعتمد العديد من إطارات العمل الخاصة بالواجهات الأمامية على JavaScript لعرض المحتوى. يمكن أن يعني ذلك أنّ محرّك بحث Google قد يستغرق بعض الوقت لفهرسة المحتوى الخاص بك أو لتعديل المحتوى المفهرَس.

الحل البديل الذي طرحناه للنقاش في مؤتمر Google I/O لهذا العام هو العرض الديناميكي. وهناك عدة طرق لتنفيذ ذلك. نعرض من خلال مشاركة المدوّنة هذه نموذجًا لتنفيذ العرض الديناميكي باستخدام Rendertron، وهو حلّ مفتوح المصدر يعتمد على Chromium بلا واجهة مستخدم رسومية.

ما هي المواقع الإلكترونية التي يمكنها الاستفادة من العرض الديناميكي؟

قد لا يكون بالإمكان تشغيل JavaScript في بعض برامج التتبّع التي تزور موقعك الإلكتروني والخاصة بمحركات البحث أو وسائل التواصل الاجتماعي. على سبيل المثال، قد يستغرق Googlebot وقتًا لتشغيل JavaScript، فضلاً عن أنّه قد يفرض بعض القيود.

يمكن الاستفادة من العرض الديناميكي في عرض المحتوى الذي يتغيّر كثيرًا ويحتاج إلى JavaScript. ويمكنك استخدام العرض المختلَط لتحسين تجربة المستخدم على موقعك (خاصةً في ما يتعلّق بالوقت الذي تسجّله سرعة عرض أوّل محتوى مفيد على الصفحة)، ومثال على ذلك تكنولوجيا Angular Universal.

ما هي آلية عمل العرض الديناميكي؟

العرض الديناميكي هو التبديل بين المحتوى المعروض من جهة العميل والمحتوى المعروض سابقًا في ما يتعلق ببرامج وكيل مستخدم محددة.

ستحتاج إلى عارض لتنفيذ JavaScript وإنتاج محتوى HTML ثابت. Rendertron هو مشروع مفتوح المصدر يستخدم Chromium بلا واجهة مستخدم رسومية لتنفيذ العرض. غالبًا ما تحمّل تطبيقات الصفحة الواحدة البيانات في الخلفية أو تؤجل تنفيذ المهام حتى يتم عرض محتواها. يوفّر Rendertron آليات لتحديد وقت اكتمال العرض على الموقع الإلكتروني. لذلك، فهو ينتظر حتى تنتهي جميع طلبات الشبكة ولا تكون هناك أي مهام معلّقة.

تتناول هذه المشاركة المواضيع التالية:

1. إلقاء نظرة على نموذج لتطبيقات الويب
2. إعداد خادم express.js صغير لعرض تطبيق الويب
3. تثبيت 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 بالوصول إلى صور القطط بدون تغييرات في رمز تطبيق الويب.

ضبط إعدادات الخادم

لعرض تطبيق الويب، يمكننا استخدام 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 https://localhost:${PORT} from ${DIST_FOLDER}`);
});

يمكنك تجربة النموذج المباشر، ومن المفترض أن تظهر لك مجموعة صور لقطط، وذلك إذا كنت تستخدم متصفّحًا حديثًا. لتشغيل المشروع من الكمبيوتر، ستحتاج إلى node.js لتنفيذ الطلبات التالية:

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

بعد ذلك، وجِّه المتصفح إلى https://localhost:8080. والآن، حان وقت ضبط إعدادات العرض الديناميكي.

نشر نسخة افتراضية من Rendertron

يشغّل Rendertron خادمًا يحصل على عنوان URL ويعرض محتوى HTML ثابتًا لعنوان URL باستخدام Chromium بلا واجهة مستخدم رسومية. سنتّبع النصائح الواردة من مشروع Rendertron ونستخدم Google Cloud Platform.

يُرجى العِلم أنّه يمكنك البدء بطبقة الاستخدام المتوفرة بدون دفع، لكن استخدام هذا الخيار قد يؤدي في مرحلة الإنتاج إلى تحمُّل تكاليف وفقًا لتسعير Google Cloud Platform.

1. أنشِئ مشروعًا جديدًا في وحدة تحكُّم Google Cloud. دوِّن "رقم تعريف المشروع" الظاهر أسفل حقل الإدخال.
2. ثبِّت حزمة تطوير برامج Google Cloud على النحو الموضَّح في المستندات، ثم سجّل دخولك.
3. استنسِخ مستودع Rendertron من GitHub باستخدام:

   git clone https://github.com/GoogleChrome/rendertron.git
   cd rendertron

4. شغِّل الطلبات التالية لتثبيت الاعتماديات وإنشاء Rendertron على جهاز الكمبيوتر:

   npm install && npm run build

5. فعِّل ذاكرة التخزين المؤقت لـ Rendertron عن طريق إنشاء ملف جديد يسمّى config.json في دليل Rendertron باستخدام المحتوى التالي:

   { "datastoreCache": true }

6. نفِّذ الطلب التالي من دليل Rendertron. استبدِل YOUR_PROJECT_ID برقم تعريف مشروعك من الخطوة 1.

   gcloud app deploy app.yaml --project YOUR_PROJECT_ID

7. اختَر منطقة وأكِّد النشر. انتظِر ريثما تكتمل العملية.
8. أدخِل عنوان URL YOUR_PROJECT_ID.appspot.com. من المفترض أن ترى واجهة Rendertron مع حقل إدخال وبضعة أزرار.

عندما ترى واجهة الويب الخاصة بـ Rendertron، يعني ذلك أنّ نشر مثيل Rendertron الخاص بك قد تم بنجاح. دوِّن عنوان URL الخاص بمشروعك (YOUR_PROJECT_ID.appspot.com) لأنّك ستحتاج إليه في الجزء اللاحق من العملية.

إضافة Rendertron إلى الخادم

يستخدم خادم الويب express.js ويحتوي Rendertron على برمجية وسيطة express.js. نفِّذ الطلب التالي في دليل ملف server.js:

npm install --save rendertron-middleware

هذا الطلب يثبّت البرمجية الوسيطة في rendertron من npm حتى نتمكّن من إضافتها إلى الخادم:

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

ضبط إعدادات قائمة روبوت الدردشة

يستخدم Rendertron عنوان HTTP user-agent لتحديد ما إذا كان مصدر الطلب برنامج تتبُّع أو متصفح مستخدم. ويحتوي Rendertron على قائمة جيدة بأسماء برامج وكيل مستخدم الخاصة بروبوت دردشة يمكن المقارنة بها. في الوضع التلقائي، لا تشمل هذه القائمة Googlebot، لأنّ هذا البرنامج يمكنه تنفيذ JavaScript. لتمكين 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
}));

تتلقّى برامج التتبّع التي تطلب نموذج الموقع الإلكتروني محتوى HTML الثابت من Rendertron، لذلك لا تحتاج برامج التتبّع إلى تنفيذ JavaScript لعرض المحتوى.

اختبار الإعدادات

لاختبار إعدادات Rendertron والتأكد من نجاحها، شغِّل فحص التوافق مع الأجهزة الجوّالة مرة أخرى.

على عكس الاختبار الأول، تكون صور القطط مرئية. في علامة التبويب HTML، يمكننا رؤية كل محتوى HTML الذي أنشأه رمز JavaScript والتأكد من أنّ Rendertron قد ألغى الحاجة إلى JavaScript لعرض المحتوى.

الخلاصة

لقد أنشأت إعدادات عرض ديناميكي بدون إجراء أي تغييرات على تطبيق الويب. ومن خلال هذه التغييرات، يمكنك عرض إصدار HTML ثابت من تطبيق الويب لبرامج الزحف.

الناشر: مارتن سبليت، فريق تحليل مؤشرات مشرفي المواقع