Rendering Dinamis dengan Rendertron

Kamis, 31 Januari 2019

Banyak framework frontend yang mengandalkan JavaScript untuk menampilkan konten. Artinya, Google mungkin perlu waktu untuk mengindeks konten Anda atau memperbarui konten yang telah diindeks.

Solusi yang kami bahas di Google I/O tahun ini adalah rendering dinamis. Ada banyak cara untuk mengimplementasikan solusi ini. Postingan blog ini menunjukkan contoh implementasi rendering dinamis menggunakan Rendertron, sebuah solusi open source berbasis Chromium headless.

Situs mana yang perlu mempertimbangkan rendering dinamis?

Tidak semua mesin telusur atau bot media sosial yang mengunjungi situs Anda dapat menjalankan JavaScript. Misalnya, Googlebot mungkin memerlukan waktu untuk menjalankan JavaScript dan memiliki beberapa batasan.

Rendering dinamis berguna untuk konten yang sering berubah dan memerlukan JavaScript agar dapat ditampilkan. Pengalaman pengguna situs Anda (khususnya waktu untuk first meaningful paint) dapat memanfaatkan rendering hybrid (misalnya, Universal Angular).

Bagaimana cara kerja rendering dinamis?

Rendering dinamis adalah pengalihan antara konten yang dirender di sisi klien dan konten yang telah dipra-render untuk agen pengguna tertentu.

Anda akan memerlukan perender untuk menjalankan JavaScript dan menghasilkan HTML statis. Rendertron adalah project open source yang menggunakan Chromium headless untuk melakukan rendering. Aplikasi Halaman Tunggal sering memuat data di latar belakang atau menunda pekerjaan untuk merender kontennya. Rendertron memiliki mekanisme untuk menentukan kapan sebuah situs menyelesaikan rendering. Rendertron akan menunggu sampai semua permintaan jaringan selesai dan tidak ada pekerjaan yang belum terselesaikan.

Postingan blog ini mencakup:

Melihat contoh aplikasi web
Menyiapkan server express.js kecil untuk menayangkan aplikasi web
Menginstal dan mengonfigurasi Rendertron sebagai middleware untuk rendering dinamis

Contoh aplikasi web

Aplikasi web "kitten corner" menggunakan JavaScript untuk memuat berbagai gambar kucing dari API dan menampilkan gambar-gambar tersebut dalam petak.

Gambar kucing lucu dalam petak dan tombol untuk menampilkan gambar lainnya - aplikasi web ini benar-benar lengkap!

Berikut ini JavaScript-nya:

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);

Aplikasi web ini menggunakan JavaScript modern (ES6), yang belum didukung di Googlebot. Kita dapat menggunakan pengujian situs mobile-friendly untuk memeriksa apakah Googlebot dapat melihat kontennya:

Pengujian situs mobile-friendly menunjukkan bahwa halaman tersebut mobile-friendly, tetapi screenshot-nya
tidak menampilkan semua kucing. Judul dan tombol terlihat, tetapi tidak ada gambar kucing
sama sekali.

Meskipun masalah ini mudah diatasi, sebaiknya pelajari cara menyiapkan rendering dinamis. Dengan rendering dinamis, Googlebot dapat melihat semua gambar kucing tanpa perubahan pada kode aplikasi web.

Menyiapkan server

Untuk menayangkan aplikasi web ini, gunakan express, yang merupakan library node.js, untuk membuat server web.

Kode server akan terlihat seperti ini (temukan kode sumber project lengkap di sini):

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}`);
});

Anda dapat mencoba contoh live-nya - Anda akan melihat banyak gambar kucing jika menggunakan browser modern. Untuk menjalankan project dari komputer, Anda memerlukan node.js untuk menjalankan perintah berikut:

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

Kemudian, arahkan browser Anda ke https://localhost:8080. Sekarang saatnya menyiapkan rendering dinamis.

Men-deploy instance Rendertron

Rendertron menjalankan server yang menerima URL dan menampilkan HTML statis untuk URL tersebut menggunakan Chromium headless. Kita akan mengikuti rekomendasi dari project Rendertron dan menggunakan Google Cloud Platform.

Formulir untuk membuat project Google Cloud Platform baru.

Perlu diperhatikan bahwa Anda dapat memulai dengan tingkat penggunaan yang tersedia tanpa pembayaran; penggunaan penyiapan ini dalam produksi dapat menimbulkan biaya sesuai dengan harga Google Cloud Platform.

Buat project baru di Google Cloud Console. Catat "ID Project" di bawah kolom input.
Instal Google Cloud SDK seperti yang dijelaskan dalam dokumentasi dan login.

Clone repositori Rendertron dari GitHub dengan:

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

Jalankan perintah berikut untuk menginstal dependensi dan membuat Rendertron di komputer Anda:
```
npm install && npm run build
```
Aktifkan cache Rendertron dengan membuat file baru bernama config.json di direktori rendertron dengan konten berikut:
```
{ "datastoreCache": true }
```
Jalankan perintah berikut dari direktori rendertron. Ganti YOUR_PROJECT_ID dengan ID project Anda dari langkah 1.
```
gcloud app deploy app.yaml --project YOUR_PROJECT_ID
```
Tentukan wilayah pilihan Anda dan konfirmasi penerapan. Tunggu sampai selesai.
Masukkan URL YOUR_PROJECT_ID.appspot.com. Anda akan melihat antarmuka Rendertron dengan satu kolom input dan beberapa tombol.

UI Rendertron setelah diterapkan ke Google Cloud Platform

Jika melihat antarmuka web Rendertron, berarti Anda berhasil menerapkan instance Rendertron Anda sendiri. Catat URL project Anda (YOUR_PROJECT_ID.appspot.com) karena Anda akan memerlukannya di bagian selanjutnya dalam proses ini.

Menambahkan Rendertron ke server

Server web menggunakan express.js dan Rendertron memiliki middleware express.js. Jalankan perintah berikut di direktori file server.js:

npm install --save rendertron-middleware

Perintah ini akan menginstal rendertron-middleware dari npm sehingga kita bisa menambahkannya ke server:

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

Mengonfigurasi daftar bot

Rendertron menggunakan header HTTP user-agent untuk menentukan apakah permintaan berasal dari bot atau browser pengguna. Header ini memiliki daftar agen pengguna bot yang dikelola dengan baik untuk melakukan perbandingan. Secara default, daftar ini tidak menyertakan Googlebot, karena Googlebot dapat menjalankan JavaScript. Agar Rendertron juga merender permintaan Googlebot, tambahkan Googlebot ke daftar agen pengguna:

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

Rendertron kemudian membandingkan header user-agent dengan ekspresi reguler ini.

Menambahkan middleware

Untuk mengirim permintaan bot ke instance Rendertron, kita perlu menambahkan middleware ke server express.js. Middleware memeriksa agen pengguna yang mengirim permintaan dan meneruskan permintaan dari bot yang dikenal ke instance Rendertron. Tambahkan kode berikut ke server.js, dan jangan lupa untuk mengganti YOUR_PROJECT_ID dengan ID project Google Cloud Platform Anda:

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

Bot yang meminta situs contoh ini akan menerima HTML statis dari Rendertron, sehingga bot tidak perlu menjalankan JavaScript untuk menampilkan konten.

Menguji penyiapan

Untuk menguji apakah penyiapan Rendertron berhasil atau tidak, jalankan kembali Pengujian Situs Mobile-Friendly.

Pengujian Situs Mobile-Friendly menunjukkan bahwa halaman tersebut mobile-friendly dan screenshotnya sekarang
menampilkan semua gambar kucing.

Tidak seperti pada pengujian pertama, gambar kucing sekarang terlihat. Pada tab HTML, kita dapat melihat semua HTML yang dihasilkan kode JavaScript, dan bahwa dengan Rendertron, JavaScript tidak diperlukan lagi untuk menampilkan konten.

Kesimpulan

Anda telah membuat penyiapan rendering dinamis tanpa melakukan perubahan apa pun pada aplikasi web. Dengan perubahan ini, Anda dapat menayangkan aplikasi web versi HTML statis ke crawler.

Diposting oleh Martin Splitt, Open Web Unicorn