Client-Side Rendering (CSR) ve Server-Side Rendering (SSR) Nedir?

SEO - 05 Eylül 2022

SEO

Arama Motoru Optimizasyonu (SEO)

Arama motoru botlarının Javascript ile yazılmış siteleri daha iyi anlamlandırıp taraması ve indeksine eklemesi için yapılan çalışmaların tümüne Javascript SEO denmektedir. Metin, görsel ve video içeriklerinin eksiksiz taranabilirliğinin analizi SEO uzmanlarının en öncelikli konularındandır. Javascript ile yazılan web sitelerinin artması ile Javascript SEO çalışmaları da başlamıştır. Modern front-end kütüphaneleri (React JS, Vue JS, Angular JS vb.) burada yeni bir çalışmanın önünü açmıştır.

Çok daha temelden gidecek olursak bildiğimiz gibi web sayfaları 3 ana parçadan oluşmaktadır.

1. HTML – İnternet sitenizin iskeleti ve içerik alanı olarak düşünebiliriz. Tamamı Html’den oluşan bir sayfa size bilgi verebilir ancak ilgi çekecek bir tasarım sunmaz. 

2. CSS – HTML’e görsellik ve tasarım katan alan CSS dosyalarıdır. CSS sayesinde aşina olduğumuz web sayfası tasarımına erişebiliriz.

3. Javascript – Bir internet sitesindeki hareketli veya değişebilir alanların olmasını sağlayan programlama dilidir. Bir alanın üzerine geldiğinizde renginin değişmesi, ya da sayfayı kaydırdığınızda altta yeni içeriklerin yüklenmesi javascript sayesinde olmaktadır. Kullanıcının hareketine göre arkada Javascript dosyaları çalışır ve kullanıcıya gösterilmek istenen son yapı sunulur.

Yazılım tarafında gerçekleşen gelişmelerle web siteleri son zamanlarda sadece JS ile kodlanmaya başlamıştır. Kod satırları HTML’de tek tek sunulmamakta direkt JS dosyaları üzerinden verilmektedir. 

Peki Google bu gelişmelere ne kadar uyum sağlayabilidi?

Google & Javascript İlişkisi

Google Javascript siteleri son yıllarda çok daha iyi itarayıp anlamlandırmaya başladı. Ancak direkt JS ile yazılmış siteleri taramak Google için oldukça maliyetli. Normal bir siteye göre tararken hem daha çok zaman harcıyor hem de sunucularını ekstra olarak yoruyor. Peki Google bu masrafi optimize etmek için ne yapıyor?

Google Javascript ile yazılmış sayfaları taramak için 2 aşamalı tarama adında bir yöntem kullanıyor. İlk aşamada Googlebot sitenize girer HTML ve CSS’leri tarar, indeksine ekler. Buradaki Javascript dosyalarını da görür ancak onları tarayıp anlama işini 2. gelişine bırakır. Bu arada kullanıcıya ilk aşamada gördüğü kadarıyla sonuçları göstermeye de başlar. 2. dalga tarama için sitenizi kendi içerisinde bir sıraya sokar. Bu saatler veya günler de sürebilir. Sitenizin değeri ve otoritesine göre kendi öncelik sırasına göre değerlendirir. 2. dalga için geldiğinde ise Javascript dosyalarını da tarar ve indeksine ekler. Böylece kullanıcıya aslında sizin planladığınız son halini göstermeye başlar. 

Google İçin Javascript’in Diğer Dillerden Farkı Nedir?

Kullandığımız tarayıcılar render motorları aracılığıyla HTML, CSS ve JS’i ayrıştırarak sunmaktadır. Bu yüzden mutlaka önce render edilmesi gerekmektedir. PHP, Pyhton gibi diller sunucu tarafında render edilen diller olarak öne çıkmaktadır. JS ile kodlanan dillerden Angular, React gibi alternatifler ise hem Server Side Rendering (SSR)  hem de Client Side Rendering (CSR) yöntemi ile render edilebilirler. 

GoogleBot Javascript Siteleri Nasıl Tarar?

Javascript ile yazılmış sitelerin arama motoru botları tarafından doğru taranması ve indekslenmesi için 2 farklı yöntem bulunmaktadır. 

• Client Side Rendering (CSR) (Dynamic Rendering Dahil)
• Server Side Rendering (SSR)

Client-Side Rendering (CSR)

• Kullanıcı veya arama motorunun tarayıcısı adresinize istek yapar.
• Sunucu isteği kabul eder ve yanıt döner.
• Tarayıcı, içeriği ve beraberindeki JS dosyalarını indirir.
• Tarayıcı içeriği görebilmek için JS dosyalarını çalıştırır.
• İçerik kullanıcılar ve botlar tarafından etkileşime girebilir hale gelir.

CSR'nin Artıları ve Eksileri

• (+) İlk sayfa yüklendikten sonra daha hızlı işlenir
• (+) Sunucuya daha az yük bindirir
• (+) Zengin site etkileşimi sağlar
• (+) Web sitesinde hızlı gezinme sağlar (her sayfa yüklemesi için yeniden indirilmesi gerekmediğinden, sunucuya daha az HTTP isteği yapılır.)
• (-) İlk sayfanın daha yavaş yüklenmesi (birden çok sayfa için gereken varlıkların yüklenmesi nedeniyle)
• (-) Düşük işlemciye sahip cihazlarda daha geç yüklenme.
• (-) İnternetin zayıf olduğu durumlarda geç yüklenme.
• (-) Düzgün uygulanmadığı takdirde SEO'yu olumsuz etkiler. (Sayfa açılışında Javascript kodları çalıştırılıp içerik oluşturulana kadar sayfa boş gözükecektir.)
• (-) Harici kütüphanelere çok sık ihtiyaç duyulur.

CSR SEO Riskleri

En modern teknolojileri kullanarak hazırladığınız sayfanız Google için boş bir sayfa olarak gözüküyor olabilir. Modern Javascript kütüphaneleriyle yazılmış bir siteniz varsa Google Search Console üzerinden URL Denetimi aracındaki “Taranan Sayfayı Göster” butonu üzerinden Google’ın sitenizi nasıl anladığını sık sık kontrol edin. Eğer sayfanız hâlâ Google indeksinde değilse canlı URL üzerinden de test edebilirsiniz.

Dinamik Oluşturma (Dynamic Rendering)

Dinamik Rendering CSR şekilde oluşturulan web sitelerinin SEO uyumlu olması için kullanılan bir yöntemdir. Temel fark GoogleBot’a ve kullanıcılara farklı render biçimleri sunmak üzerine kuruludur. Sunucu isteği yapıldığında sunucu tarafında isteğin GoogleBot üzerinden mi yoksa kullanıcı tarafından mı yapıldığı anlaşılır. Eğer GoogleBot tarafından yapılıyorsa sunucuda render edilecek bir HTML yanıtı döner. Kullanıcılar ise sitenizi yine CSR olarak görüntülemeye devam ederler. 

Server-Side Rendering (SSR)

• Kullanıcı veya arama motorunun tarayıcısı adresinize istek yapar.
• Sunucu isteği kabul eder, HTML’in tamamını oluşturarak yanıtı döner.
• Tarayıcı oluşturulan HTML’i ve JS dosyalarını indirir.
• İçerik kullanıcılar ve botlar tarafından etkileşime girebilir hale gelir.

SSR'nin Artıları ve Eksileri

• (+) Sayfaların daha hızlı yüklenmesini sağlayarak kullanıcı deneyimini geliştirir.
• (+) SEO açısından avantajlıdır.
• (+) Statik içerik sunan siteler için çok daha ideal bir yapıdır.
• (+) Daha az JS bağımlılığı mevcuttur.
• (+) Kullanıcının internet bağlantısı yavaş olduğunda da idealdir.
• (-) Sunucunun çok sayıda ziyaretçisi olduğunda veya site büyük olduğunda, sayfa oluşturulurken önemli yavaşlamalara neden olabilir. (TTFB süresi etkilenebilir)
• (-) Her gezinmede tüm sayfayı yeniden yüklemek zorunda kalır.
• (-) Daha yüksek performans sağlamak için sunucu maliyetleri yüksek olacaktır.