İçeriğini tarayıcıda JavaScript ile oluşturan bir uygulamada, ilk HTML cevabı sayfanın asıl metnini taşımayabilir. Bu durum özellikle bağlantı önizlemesi çıkaran servisler ve JavaScript desteği sınırlı tarayıcılar için sorun oluşturur. Geliştirdiğim prerender servisi, mevcut uygulamanın işlenmiş HTML sürümünü bu isteklere sunuyordu.
Bu ürünün mühendislik problemi, yalnız bir tarayıcı açıp sayfayı kaydetmek değildi. Hangi isteklerin işleneceği, oluşan HTML’in ne kadar süre saklanacağı ve kaynak sayfa değiştiğinde nasıl yenileneceği birlikte tasarlanmalıydı.
İsteği uygulamadan önce yönlendirmek
Entegrasyonda müşterinin web sunucusu isteği değerlendiriyor. İşlenmiş HTML gerektiren bot isteği prerender servisine yönlendirilirken, insan ziyaretçi uygulamanın normal yolunu kullanıyor. Görsel, script ve stil dosyaları gibi statik varlıkların bu işleme gereksiz yere girmemesi gerekiyor.
Kararı web sunucusunda tutmak, uygulama içindeki bütün sayfaları yeniden yazmadan entegrasyon yapmayı sağladı. Servisin ürettiği HTML, ziyaretçinin aynı adreste göreceği içerikle anlam bakımından eşleşmeli. Bota farklı bir ürün veya farklı bilgi sunmak bu tasarımın amacı değil.
Redis önbelleğini ana okuma yolu yapmak
Sayfayı tarayıcıda işlemek, hazır HTML’i okumaktan daha pahalı. Botların aynı adresleri tekrar ziyaret etmesi nedeniyle her istekte yeniden işlemek gereksiz iş üretiyor. İşlenmiş sayfaları Redis’te saklayıp sonraki istekleri bu kayıt üzerinden karşıladım.
Bu yapıda önbellek yalnız sonradan eklenen bir hızlandırma katmanı değil; ürünün temel okuma yolu. Yeni sayfanın işlenmesi, kaydın bulunması ve eski içeriğin yenilenmesi ayrı durumlar olarak düşünülmeli. Önbellekteki bir kopyanın varlığı tek başına güncel olduğu anlamına gelmiyor.
Yenileme sıklığını ürün ihtiyacına göre seçmek
Bir haber sayfasıyla nadiren değişen kurumsal sayfa aynı yenileme aralığına ihtiyaç duymuyor. Daha sık işleme içeriği güncel tutabilir, ancak tarayıcı çalıştırma maliyetini ve kaynak sitenin aldığı yükü de artırır. Yenileme aralığını bu iki ihtiyaç arasında bir ürün ayarı olarak sundum.
Yönetim paneli Laravel ve Tailwind CSS ile hazırlanmıştı. Proje sahipleri önbelleğe alınan adresleri ve yenileme ayarlarını buradan yönetebiliyordu. Böylece işlenmiş sürüm, arka planda unutulan görünmez bir kopya olmak yerine yönetilebilen bir ürün parçası haline geldi.
Teknik SEO’da içeriğin eşleşmesini kontrol etmek
Bot için dönen HTML’in başlığı, açıklaması ve canonical adresi asıl sayfayla tutarlı olmalı. Yanlış durum kodu dönen veya eski bir yönlendirmeyi saklayan önbellek, metin görünür hale gelse bile yeni sorunlar oluşturabilir. Kontrolün yalnız ekran görüntüsüyle sınırlı kalmaması gerekiyor.
Aynı adresi ziyaretçi ve bot görünümünde incelemek; temel metin, bağlantılar ve metadata arasındaki farkları görünür kılıyor. Özellikle çok dilli sayfalarda, bir dilin işlenmiş kopyasını başka bir dilin adresinden sunmamak önemli.
Yeni bir projede seçilecek işleme modeli
Google, dinamik işleme rehberinde bu yöntemi geçici bir çözüm olarak ele alıyor ve sunucuda işleme, statik üretim veya hydration öneriyor. Yeni bir ürünün temel mimarisini seçerken bu ayrım dikkate alınmalı.
Prerender mevcut bir uygulamanın belirli ihtiyaçlarına cevap verebilir. Buna karşılık iki sunum yolunu güncel ve tutarlı tutmanın bakım maliyeti vardır. Ürün kararını verirken hangi içeriğin ne zaman üretileceğini ve arama motorları dışındaki ziyaretçilere nasıl ulaşacağını birlikte değerlendirmek gerekiyor.