Rendertron ile Dinamik Oluşturma

31 Ocak 2019, Perşembe

Birçok ön uç çerçevesi içeriği göstermek için JavaScript kullanır. Bu nedenle, Google'ın içeriğinizi dizine eklemesi veya dizine eklenmiş içeriği güncellemesi biraz zaman alabilir.

Bu yıl Google I/O'da ele aldığımız geçici bir çözüm dinamik oluşturma oldu. Bu birçok şekilde uygulanabilir. Bu blog yayınında, gözetimsiz Chromium'a dayalı bir açık kaynak çözümü olan Rendertron'u kullanarak dinamik oluşturma uygulamasına bir örnek gösterilmektedir.

Hangi siteler dinamik oluşturma seçeneğini değerlendirmelidir?

Web sitenizi ziyaret eden tüm arama motoru veya sosyal medya botları JavaScript'i çalıştıramaz. Googlebot’un JavaScript’inizi çalıştırması biraz zaman alabilir ve bazı sınırlamaları vardır.

Dinamik oluşturma, sık değişen ve görüntülenmesi için JavaScript'in gerektiği içerikler için faydalıdır. Karma oluşturma (örneğin, Açısal Evrensel) seçeneği sitenizin kullanıcı deneyimi (özellikle ilk anlamlı boyama süresi) açısından faydalı olabilir.

Dinamik oluşturma nasıl çalışır?

Dinamik oluşturma, belirli kullanıcı aracıları için istemci tarafında oluşturulan ve önceden oluşturulmuş içerik arasında geçiş anlamına gelir.

JavaScript'i çalıştırmak ve statik HTML oluşturmak için bir oluşturucuya ihtiyacınız olur. Rendertron, sayfayı oluşturmak için gözetimsiz Chromium'u kullanan açık kaynak bir projedir. Tek Sayfalık Uygulamalar genellikle verileri arka planda yükler veya içeriklerini daha sonra oluşturur. Rendertron, web sitesini oluşturmayı tamamladığını belirleyen mekanizmalara sahiptir. Tüm ağ istekleri bitene ve tamamlanmamış herhangi bir iş kalmayana kadar bekler.

Bu yayında aşağıdaki konular ele alınmaktadır:

1. Örnek web uygulamasına göz atma
2. Web uygulamasını sunmak için küçük bir express.js sunucusu ayarlayın
3. Rendertron'u yükleme ve dinamik oluşturma için bir ara yazılım olarak yapılandırma

Örnek web uygulaması

"Kitten corner" web uygulaması bir API'den çeşitli kedi resimleri yüklemek için JavaScript'i kullanır ve bunları bir tablo içinde görüntüler.

JavaScript'i şöyledir:

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

Web uygulaması, Googlebot'ta henüz desteklenmeyen modern JavaScript (ES6) kullanmaktadır. Googlebot'un içeriği görüp göremediğini kontrol etmek için mobil uyumluluk testini kullanabiliriz:

Bu sorun basit bir şekilde düzeltilebilir. Diğer yandan, dinamik oluşturmanın nasıl kurulduğunu öğrenmek için iyi bir egzersizdir. Dinamik oluşturma, web uygulaması kodunda herhangi bir değişiklik yapılmadan Googlebot'un kedi resimlerini görmesine olanak tanır.

Sunucuyu yapılandırma

Web uygulamasını sunmak için bir node.js kitaplığı olan express yapısını kullanarak web sunucusu oluşturalım.

Sunucu kodu şu şekilde görünür (projenin tüm kaynak kodunu burada bulabilirsiniz):

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

Canlı örneği deneyebilirsiniz. Modern bir tarayıcı kullanıyorsanız bir sürü kedi resmi görmeniz gerekir. Projeyi bilgisayarınızdan çalıştırmak için node.js'nin aşağıdaki komutları çalıştırması gerekir:

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

Ardından tarayıcınızı https://localhost:8080 adresine yönlendirin. Şimdi dinamik oluşturmayı kurmanın zamanı.

Rendertron örneği dağıtımı

Rendertron, gözetimsiz Chromium'u kullanarak istenen URL'yi alıp statik HTML döndüren bir sunucu çalıştırır. Rendertron projesinin önerisine uyarak Google Cloud Platform'u kullanıyoruz.

Ücretsiz olarak sunulan kullanım katmanı ile başlayabileceğinizi, bu kurulumun üretimde kullanılması durumunda Google Cloud Platform fiyatlandırmasına kıyasla bazı maliyetlerin olabileceğini unutmayın.

1. Google Cloud Console'da yeni bir proje oluşturun. Giriş alanının altındaki "Proje Kimliği" bilgisini not edin.
2. Dokümanlarda açıklandığı gibi Google Cloud SDK'yı yükleyin ve giriş yapın.
3. Rendertron havuzunu şu komutla GitHub'dan kopyalayın:

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

4. Bağımlılıkları yüklemek ve Rendertron'u bilgisayarınızda oluşturmak için aşağıdaki komutları çalıştırın:

   npm install && npm run build

5. Rendertron dizininde aşağıdaki içerikle config.json adlı yeni bir dosya oluşturarak Rendertron'un önbelleğini etkinleştirin:

   { "datastoreCache": true }

6. Aşağıdaki komutu rendertron dizininden çalıştırın. YOUR_PROJECT_ID yerine 1. adımdaki proje kimliğinizi yazın.

   gcloud app deploy app.yaml --project YOUR_PROJECT_ID

7. İstediğiniz bir bölgeyi seçin ve dağıtımı onaylayın. İşlemin bitmesini bekleyin.
8. URL'yi YOUR_PROJECT_ID.appspot.com olarak girin. Bir giriş alanı ve birkaç düğmenin bulunduğu Rendertron arayüzünü görürsünüz.

Kendi Rendertron örneğinizi başarıyla dağıttığınızda Rendertron web arayüzünü görürsünüz. Sürecin bir sonraki bölümünde ihtiyaç duyacağınızdan projenizin URL'sini (YOUR_PROJECT_ID.appspot.com) not edin.

Rendertron'u sunucuya ekleme

Web sunucusunda express.js kullanılmakta ve Rendertron'da bir express.js ara katman yazılımı bulunmaktadır. server.js dosyasının dizininde aşağıdaki komutu çalıştırın:

npm install --save rendertron-middleware

Bu komut, npm'den rendertron-middleware'i yükler, böylece bunu sunucuya ekleyebiliriz:

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

Bot listesini yapılandırma

Rendertron, isteğin bir bottan mı yoksa bir kullanıcının tarayıcısından mı geldiğini belirlemek için user-agent HTTP üstbilgisini kullanır. Karşılaştırma yapmak için kapsamlı bir bot kullanıcı aracıları listesine sahiptir. Googlebot JavaScript yürütebildiğinden varsayılan olarak bu listede yer almaz. Rendertron'un Googlebot isteklerini de oluşturması için Googlebot'u kullanıcı aracıları listesine ekleyin:

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

Rendertron, user-agent üstbilgisini daha sonra bu normal ifadeyle karşılaştırır.

Ara katman yazılımı ekleme

Rendertron örneğine bot istekleri göndermek için ara katman yazılımını express.js sunucumuza eklememiz gerekir. Ara katman yazılımı, istekte bulunan kullanıcı aracısını kontrol eder ve bilinen botlardan gelen istekleri Rendertron örneğine yönlendirir. Aşağıdaki kodu server.js'ye ekleyin ve YOUR_PROJECT_ID yerine Google Cloud Platform proje kimliğinizi yazmayı unutmayın:

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

Örnek web sitesi için istekte bulunan botlar Rendertron'dan statik HTML'yi aldıklarından içeriği görüntülemek için JavaScript'i çalıştırmaya ihtiyaç duymaz.

Kurulumumuzu test etme

Rendertron kurulumunun başarılı olup olmadığını test etmek için Mobil Uyumluluk Testi'ni tekrar çalıştırın.

İlk testten farklı olarak bu kez kedi resimleri görüntülenir. HTML sekmesinde, JavaScript kodunun oluşturduğu tüm HTML'yi ve Rendertron'un içeriği görüntülemek için JavaScript'e duyulan ihtiyacı ortadan kaldırdığını görebiliriz.

Sonuç

Web uygulamasında herhangi bir değişiklik yapmadan dinamik oluşturma kurulumu yapılandırdınız. Bu değişikliklerle, web uygulamasının statik HTML sürümünü tarayıcılara sunabilirsiniz.

Yayınlayan: Martin Splitt, Open Web Unicorn