Rendertron ile Dinamik Oluşturma

31 Ocak 2019, Perşembe

Birçok ön uç çerçevesi, içeriği göstermek için JavaScript’e güvenir. Bu, Google’ın içeriğinizi dizine eklemesinin veya dizine eklenen içeriği güncellemesinin biraz zaman alabileceği anlamına gelebilir.

Google I/O’da tartıştığımız bir çözüm yolu
bu yıl
dinamik oluşturma. Bunu uygulamanın birçok yolu vardır. Bu blog yazısı, dinamik oluşturmanın bir uygulama örneğini göstermektedir:
Rendertron, başsız Chromium tabanlı açık kaynaklı bir çözümdür.

Hangi siteler dinamik oluşturmayı düşünmeli?

Web sitenizi ziyaret eden tüm arama motorları veya sosyal medya botları JavaScript çalıştıramaz. Googlebot
bazı sınırlamalarasahiptir, örneğin JavaScript’inizi çalıştırması zaman alabilir.

Dinamik oluşturma, sık değişen ve görüntülenmesi için JavaScript gerektiren içerikler için kullanışlıdır. Sitenizin kullanıcı deneyimi (özellikle
ilk anlamlı boyamasüresi), hibrit oluşturmayı (örneğin,
Angular Universal).

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şturulan içerik arasında geçiş yapmak anlamına gelir.

JavaScript’i yürütmek ve statik HTML üretmek için bir oluşturucuya ihtiyacınız olacak. Rendertron, oluşturma işlemi için
başsız Chromium kullanan açık kaynaklı bir projedir. Tek Sayfalı Uygulamalar genellikle verileri arka planda yükler veya içeriklerini oluşturma işini erteler. Rendertron, bir web sitesinin oluşturma işlemini ne zaman tamamladığını belirlemek için mekanizmalara sahiptir. Tüm ağ istekleri bitene ve bekleyen bir iş kalmayana kadar bekler.

Bu yazı şunları kapsar:

1. Örnek bir web uygulamasına göz atın
2. Küçük bir express.js sunucusu kurun
3. Dinamik oluşturma için bir ara yazılım olarak Rendertron’u kurun ve yapılandırın

Örnek web uygulaması

“kitten corner” web uygulaması
bir API’den çeşitli kedi resimleri yüklemek için JavaScript kullanır ve bunları bir ızgarada görüntüler.

İşte JavaScript:

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

Bu sorunu çözmek basit olsa da, dinamik oluşturmanın nasıl kurulacağını öğrenmek için iyi bir alıştırmadır. Dinamik oluşturma, web uygulaması kodunda değişiklik yapmadan Googlebot’un kedi resimlerini görmesini sağlayacaktır.

Sunucuyu kurun

Web uygulamasını sunmak için web sunucuları oluşturmaya yarayan
express, a node.js
kütüphanesini kullanalım.

Sunucu kodu şu şekildedir (
tam proje kaynak kodunu
burada bulabilirsiniz):

Canlı örneği
deneyebilirsiniz – modern bir tarayıcı kullanıyorsanız bir sürü kedi resmi görmelisiniz. Projeyi bilgisayarınızdan çalıştırmak için
node.js gereklidir ve şu komutları çalıştırmanız gerekir:

Ardından tarayıcınızı şu adrese yönlendirin:
https://alienroad.com. Şimdi dinamik oluşturmayı kurma zamanı.

Bir Rendertron örneği dağıtın

Rendertron, bir URL alan ve başsız Chromium kullanarak bu URL için statik HTML döndüren bir sunucu çalıştırır. Rendertron projesinin
önerisini takip edeceğiz
ve
Google Cloud Platform.

kullanacağız. Lütfen
ödeme gerektirmeyen kullanım katmanıile başlayabileceğinizi unutmayın; bu kurulumu üretimde kullanmak
Google Cloud Platform fiyatlandırmasına.

1. göre maliyet getirebilir.
   Google Cloud konsolundayeni bir proje oluşturun. Giriş alanının altındaki “Proje Kimliği”ni not edin.
2. Dokümantasyonda açıklandığı gibi Google Cloud SDK’yı
   yükleyin ve giriş yapın.
3. Rendertron deposunu GitHub’dan şu komutla klonlayın:
4. Bağımlılıkları yüklemek ve Rendertron’u bilgisayarınızda derlemek için şu komutları çalıştırın:
5. Rendertron dizininde config.json adında yeni bir dosya oluşturarak Rendertron’un önbelleğini etkinleştirin:
6. Rendertron dizininden şu komutu çalıştırın. 1. adımdaki proje kimliğinizle
   YOUR_PROJECT_ID kısmını değiştirin.
7. Seçtiğiniz bir bölgeyi seçin ve dağıtımı onaylayın. Bitmesini bekleyin.
8. URL’yi girin: YOUR_PROJECT_ID.appspot.com. Bir giriş alanı ve birkaç düğme içeren Rendertron arayüzünü görmelisiniz.

Rendertron web arayüzünü gördüğünüzde, kendi Rendertron örneğinizi başarıyla dağıtmışsınız demektir. Projenizin URL’sini (YOUR_PROJECT_ID.appspot.com) not edin, çünkü işlemin bir sonraki bölümünde buna ihtiyacınız olacak.

Rendertron’u sunucuya ekleyin

Web sunucusu express.js kullanıyor ve Rendertron’un bir express.js
ara yazılımı var. Şu komutu server.js dosyasının bulunduğu dizinde çalıştırın:

Bu komut, sunucuya ekleyebilmemiz için rendertron-middleware’i npm’den yükler:

Bot listesini yapılandırın

Rendertron, bir isteğin bir bottan mı yoksa kullanıcının tarayıcısından mı geldiğini belirlemek için user-agent HTTP başlığını kullanır. Karşılaştırma yapmak için
iyi korunmuş bir bot kullanıcı aracısı listesine
sahiptir. Varsayılan olarak bu liste Googlebot’u içermez, çünkü Googlebot JavaScript çalıştırabilir. Rendertron’un Googlebot isteklerini de oluşturmasını sağlamak için Googlebot’u kullanıcı aracıları listesine ekleyin:

Rendertron, user-agent başlığını daha sonra bu düzenli ifadeyle karşılaştırır.

Ara yazılımı ekleyin

Bot isteklerini Rendertron örneğine göndermek için ara yazılımı
express.js sunucumuza eklememiz gerekir. Ara yazılım, istekte bulunan kullanıcı aracısını kontrol eder ve bilinen botlardan gelen istekleri Rendertron örneğine iletir. Aşağıdaki kodu server.js’ye ekleyin ve YOUR_PROJECT_ID kısmını Google Cloud Platform proje kimliğinizle değiştirmeyi unutmayın:

Örnek web sitesini isteyen botlar, statik HTML’yi Rendertron’dan alır, böylece botların içeriği görüntülemek için JavaScript çalıştırmasına gerek kalmaz.

Kurulumumuzu test etme

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

İlk testin aksine, kedi resimleri görünür durumdadır. HTML sekmesinde, JavaScript kodunun oluşturduğu tüm HTML’yi ve Rendertron’un içeriği görüntülemek için JavaScript ihtiyacını ortadan kaldırdığını görebiliriz.

Sonuç

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

Yazan: Martin Splitt, Open Web Unicorn