Şu yazıyı okuyorsunuz: Müşteri Tarafı vs. Sunucu tarafı oluşturma
Daha hızlı web sayfası yükleme süreleri, kullanıcı deneyiminde ve SEO’da önemli bir rol oynar ve sayfa yükleme hızı, Google’ın algoritması için önemli bir belirleyici faktördür.
Bir ön uç web geliştiricisi, bir web sitesini hızlı bir deneyim ve dinamik içerik sağlayacak şekilde oluşturmanın en iyi yoluna karar vermelidir.
İki popüler işleme yöntemi, istemci tarafı işleme (CSR) ve sunucu tarafı işlemeyi (SSR) içerir.
Tüm web sitelerinin farklı gereksinimleri vardır; dolayısıyla istemci tarafı ve sunucu tarafı oluşturma arasındaki farkı anlamak, web sitenizi iş hedeflerinize uyacak şekilde oluşturmanıza yardımcı olabilir.
İstemci tarafı oluşturma nedir ve nasıl çalışır?
İstemci tarafı oluşturma, web sitesi oluşturma konusunda nispeten yeni bir yaklaşımdır.
JavaScript kitaplıkları onu entegre etmeye başladığında popüler hale geldi; Angular ve React.js, bu tür oluşturmada kullanılan kitaplıkların en iyi örneklerinden bazılarıydı.
Bir web sitesinin JavaScript’ini sunucu yerine tarayıcınızda oluşturarak çalışır.
Sunucu, HTML belgesinin tüm içeriğini almak yerine, JS dosyalarını içeren temel bir HTML belgesiyle yanıt verir.
İlk yükleme süresi biraz yavaş olsa da, yol başına farklı bir HTML sayfasına bağlı olmadıkları için sonraki sayfa yüklemeleri hızlı olacaktır.
Müşteri tarafından oluşturulan siteler, mantığı yönetmekten API’den veri almaya kadar her şeyi “bağımsız olarak” yapar. Kullanıcının ziyaret ettiği her sayfa ve ona karşılık gelen URL dinamik olarak oluşturulduğu için sayfa, kod yürütüldükten sonra kullanılabilir hale gelir.
O KSS süreci Aşağıdaki gibidir:
- Kullanıcı ziyaret etmek istediği URL’yi adres çubuğuna girer.
- Belirtilen URL’deki sunucuya bir veri isteği gönderilir.
- İstemcinin siteye yönelik ilk isteğinde sunucu, statik dosyaları (CSS ve HTML) istemcinin tarayıcısına iletir.
- İstemci tarayıcısı önce HTML içeriğini, ardından JavaScript’i indirecektir. Bu HTML dosyaları JavaScript’e bağlanır ve geliştiricinin kullanıcı için tanımladığı yükleme sembollerini görüntüleyerek yükleme işlemini başlatır. Bu aşamada web sitesi henüz kullanıcıya görünür durumda değildir.
- JavaScript indirildikten sonra içerik, müşterinin tarayıcısında dinamik olarak oluşturulur.
- Müşteri web sitesinde gezindikçe ve web sitesiyle etkileşime girdikçe web içeriği görünür hale gelir.
Sunucu tarafı oluşturma nedir ve nasıl çalışır?
Sunucu tarafı oluşturma, bilgileri ekranda görüntülemek için en yaygın tekniktir.
Web tarayıcısı, sunucudan bilgi için bir istek gönderir, doldurulacak kullanıcıya özel verileri elde eder ve istemciye tamamen işlenmiş bir HTML sayfası gönderir. Kullanıcı sitede yeni bir sayfayı her ziyaret ettiğinde, sunucu tüm süreci tekrarlayacaktır.
SSR süreci adım adım şu şekilde ilerler:
- Kullanıcı ziyaret etmek istediği URL’yi adres çubuğuna girer.
- Sunucu, tarayıcıya işlenmeye hazır bir HTML yanıtı sunar.
- Tarayıcı sayfayı görüntüler (artık görünür) ve JavaScript’i indirir.
- Tarayıcı, sayfayı etkileşimli hale getiren React’ı çalıştırır.
İstemci tarafı ve sunucu tarafı oluşturma arasındaki farklar nelerdir?
Bu iki işleme yaklaşımı arasındaki temel fark, işlemlerinin algoritmalarındadır. CSR, yüklemeden önce boş bir sayfa görüntülerken SSR, ilk yüklemede tamamen oluşturulmuş bir HTML sayfası görüntüler.
Bu, tarayıcının büyük JavaScript dosyalarını işlemesine gerek olmadığından, sunucu tarafı oluşturmaya istemci tarafı oluşturmaya göre hız avantajı sağlar. İçerik genellikle birkaç milisaniye içinde görünür.
Arama motorları daha iyi SEO için siteyi tarayabilir, bu da web sayfalarınızın dizine eklenmesini kolaylaştırır. Metin biçimindeki bu okunabilirlik, SSR sitelerinin tarayıcıda tam olarak nasıl göründüğüdür.
Ancak istemci tarafı oluşturma, web sitesi sahipleri için daha ucuz bir seçenektir.
Oluşturma sorumluluğunu istemciye (sayfanızı görüntülemeye çalışan bot veya kullanıcı) aktararak sunucularınızdaki yükü hafifletir. Ayrıca ilk yüklemeden sonra web sitesi ile hızlı etkileşim sağlayarak site ile zengin etkileşimler sunar.
Her sayfanın sıfırdan işlendiği SSR’den farklı olarak, CSR ile sunucuya daha az HTTP isteği yapılır ve bu da sayfalar arasında daha yavaş bir geçişe neden olur.
Sunucunun farklı kullanıcılardan eşzamanlı birçok istek alması durumunda SSR, yüksek sunucu yükü altında da çökebilir.
CSR’nin dezavantajları, ilk yükleme süresinin uzun olmasıdır. Bu SEO’yu etkileyebilir; Tarayıcılar içeriğin yüklenmesini ve siteden ayrılmasını bekleyemez.
Bu iki aşamalı yaklaşım, bir sayfanın HTML’sini ilk kez tarayıp dizine ekledikten sonra eksik JavaScript içeriği nedeniyle sayfanızda boş içerik görme olasılığını artırır. Çoğu durumda CSR’nin harici bir kütüphane gerektirdiğini unutmayın.
Sunucu tarafı oluşturma ne zaman kullanılmalı?
Google’daki görünürlüğünüzü artırmak ve arama motoru sonuç sayfalarında (SERP’ler) üst sıralarda yer almak istiyorsanız, sunucu tarafı oluşturma bir numaralı seçenektir.
Daha az sayfa, işlev ve dinamik veri içeren basit bir kullanıcı arayüzüne sahip e-öğrenme web siteleri, çevrimiçi pazarlar ve uygulamalar bu tür temsilden yararlanır.
İstemci tarafı oluşturma ne zaman kullanılmalı?
İstemci tarafı oluşturma genellikle sosyal ağlar veya çevrimiçi mesajlaşma programları gibi dinamik web uygulamalarıyla birleştirilir. Bunun nedeni, bu uygulamalardaki bilgilerin sürekli değişmesi ve kullanıcı talebini karşılamak amacıyla hızlı güncellemeler yapmak için büyük ve dinamik verileri işlemek zorunda olmasıdır.
Buradaki odak noktası, SEO yerine kullanıcı deneyimine öncelik veren, birçok kullanıcısı olan zengin bir sitedir.
Hangisi daha iyi: sunucu tarafı mı yoksa istemci tarafı mı?
Sitenizin içeriği çok fazla kullanıcı etkileşimi gerektirmiyorsa SSR daha etkilidir. Erişilebilirliği, sayfa yükleme sürelerini, SEO ve sosyal medya desteğini olumlu yönde etkiler.
Öte yandan, CSR, web uygulamaları için uygun maliyetli görüntü oluşturma sağlamak açısından mükemmeldir ve oluşturulması ve bakımı daha kolaydır; İlk Giriş Gecikmesi (FID) için en iyisidir.
Bazen hibrit çözümler mevcut olduğundan ikisi arasında seçim yapmanıza gerek kalmaz. Hem SSR hem de CSR, tek bir web sitesi veya web sayfasında uygulanabilir.
Örneğin, çevrimiçi bir pazar yerinde, ürün açıklamalarının bulunduğu sayfalar, statik olduklarından ve arama motorları tarafından kolayca indekslenmeleri gerektiğinden sunucuda oluşturulabilir.
Kullanıcı hesapları gibi sayfaların SERP’lerde sıralanması gerekmez, bu nedenle UX için bir CRS yaklaşımı daha iyi olabilir.
Hem CSR hem de SSR, web sitelerini oluşturmaya yönelik popüler yaklaşımlardır. Siz ve ekibiniz bu kararı ürün geliştirmenin erken safhalarında vermelisiniz.
Projenizi ve seçilen temsilin SERP’lerdeki konumunuzu ve web sitenizin kullanıcı deneyimini nasıl etkileyeceğini düşünün.
Genel olarak CSR dinamik web siteleri için daha iyiyken, SSR statik web siteleri için daha uygundur.
Daha fazla kaynak:
