Hiç bir web sitesini ziyaret ettiğinizde, sayfa yüklenirken yalnızca bir milisaniyeliğine boş bir sayfa gördüğünüz oldu mu? Öyleyse büyük olasılıkla istemcide (client) oluşturulan bir web sitesini ziyaret ettiniz. Peki client-side rendering csr nedir, nasıl çalışır ve web sitelerimizde nasıl bir fark yaratır?
İstemci tarafı oluşturma, geliştiricilerin içeriği hedef kitlelere sunma biçimini değiştiren, web tarafından geliştirilmiş bir tekniktir. Oluşturma sürecini sunucudan kullanıcının tarayıcısına kaydırır ve dinamik, etkileşimli ve sürükleyici web deneyimleri oluşturmak için JavaScript’ten yararlanır.
Bu makalede client-side rendering ne olduğunu, nasıl çalıştığını, artılarını ve eksilerini inceleyeceğiz. Ayrıca istemci tarafı işlemenin doğru yaklaşım olduğu kullanım senaryolarını ve bunu uygulamaya yönelik çerçeveleri de öğreneceğiz. Hazırsanız başlayalım…
Client-side Rendering CSR Nedir?
CSR Nedir? İstemci tarafı oluşturma (CSR), bir web sitesini veya uygulamayı tarayıcıda oluşturmak için JavaScript kullanan bir JavaScript oluşturma yöntemidir. CSR ile içeriğin işlenmesi ve oluşturulması sunucu yerine tarayıcıda gerçekleşir.
CSR ile sunucu, JavaScript dosyalarına bağlantılar içeren bir HTML dosyası gönderir. Tarayıcı daha sonra gerekli kaynakları indirir ve bunları sayfayı doldurmak ve içeriği oluşturmak için kullanır.
CSR, sohbet uygulamaları ve sosyal medya platformları gibi dinamik içeriğe sahip ve yüksek derecede etkileşim gerektiren uygulamalar için yaygın olarak kullanılır. Ayrıca tek sayfalı uygulamalar (SPA’lar) ve arama motorları tarafından dizine eklenmesi gerekmeyen yönetici ve kullanıcı kontrol panelleri gibi dahili uygulamalar için de idealdir.
React, Vue.js, Angular, Backbone.js, Ember.js ve Svelte gibi JavaScript çerçeveleri, istemci tarafı oluşturmayı uygulamak için popüler seçenekler haline geldi.
Client-side rendering CSR Nasıl Çalışır?
İstemci tarafı işlemenin nasıl çalıştığının ve işleme sürecinde yer alan adımların bir dökümü aşağıda verilmiştir:
- Kullanıcı bir web sayfası ister: Kullanıcı, tarayıcıdan bir web sayfası ister.
- Sunucu isteği alır: Bu kullanıcının eylemi, sunucuya istenen rotayı veya URL’yi tanımlayan bir GET isteğini tetikler.
- Sunucu, CSS ve JavaScript dosyalarına bağlantılar içeren minimal bir HTML sayfası gönderir: Tarayıcı, sunucudan ilk HTML dosyasını ister. Dosya, harici CSS stil sayfalarına ve JavaScript dosyalarına bağlantılar içerir.
- HTML’yi ayrıştırma: Tarayıcı, HTML işaretlemesini ayrıştırır ve web sayfasının yapısını temsil eden Belge Nesne Modeli (DOM) ağacını oluşturur.
- Tarayıcı CSS ve JavaScript’i indirir: Tarayıcı, CSS ve JavaScript kaynaklarını indirmek için sunucuya ek istekler gönderir.
- Sayfanın oluşturulması: Tarayıcı, web sayfasının temel yapısını oluşturmak için DOM ağacını ve indirilen CSS dosyalarını kullanır. Buna metin, resimler, düğmeler ve stiller gibi öğeler dahildir.
- JavaScript yürütme: Tarayıcı, web sayfasına etkileşim ve dinamik içerik eklemek için JavaScript kodunu yürütür. Bu, animasyonları, form doğrulamalarını veya bir API’den veri almayı içerebilir.
- Yeniden oluşturma ve güncelleme: Kullanıcı web sayfasıyla etkileşime girdikçe (düğmelere tıklamak, formları doldurmak), tarayıcı, kullanıcının eylemlerine göre web sayfasının bazı kısımlarını yeniden oluşturacaktır. Bu, DOM’un güncellenmesini veya yeni veriler için sunucuya ek isteklerde bulunulmasını içerebilir.
- Son görünüm: Güncellenen DOM, dinamik olarak getirilen verilerle birlikte tarayıcı tarafından oluşturulur ve sonuçta tamamen etkileşimli ve dinamik olarak güncellenen bir web sayfası elde edilir.
Client-side rendering Avantajları
Azaltılmış sunucu yükü
İstemci tarafı işleme, işleme sürecinin önemli bir bölümünü sunucudan istemcinin tarayıcısına aktarır. Sunucunun yalnızca minimum düzeyde HTML ve statik varlık göndermesi gerektiğinden, daha düşük işlem yükü ve daha az sunucu yükü elde edilir.
Sunucu tarafı oluşturmada, sunucunun her istek için HTML’nin tamamını oluşturması gerekir; bu da özellikle trafiğin yoğun olduğu dönemlerde sunucu kaynakları üzerinde potansiyel bir yük oluşturur. Sunucu, istemci tarafı işlemeden yararlanarak veri alımına, iş mantığına ve API isteklerine odaklanabilir, bu da gelişmiş ölçeklenebilirlik ve daha iyi kaynak kullanımı sağlar.
Daha fazla etkileşim
CSR’nin kullanıcı etkileşimini geliştirmesinin bazı yolları şunlardır:
- CSR ile düğme tıklamaları, form gönderimleri veya sayfalar arasında gezinme gibi kullanıcı etkileşimleri, tam sayfanın yeniden yüklenmesine gerek kalmadan tarayıcıda gerçekleştirilir. CSR uygulamaları, kullanıcı eylemlerine ve girdilerine gerçek zamanlı olarak yanıt verebilir. Bu, güncellemelerin neredeyse anında gerçekleşmesini sağlar, daha zengin bir kullanıcı deneyimi sağlar ve web sitelerinin daha duyarlı olmasını sağlar
- React, Vue.js ve Angular gibi CSR çerçeveleri, karmaşık güncellemelerin algılanabilir herhangi bir gecikme olmadan yürütülmesini sağlamak için Virtual DOM gibi etkili oluşturma tekniklerini kullanır
Client-side rendering Dezavantajları
Daha uzun sayfa yükleme süresi
İstemci tarafı işleme, sunucu tarafı işlemeye göre daha uzun sayfa yükleme sürelerine yol açabilir çünkü tarayıcının web sayfasının tamamını oluşturmadan önce gerekli tüm JavaScript dosyalarını indirmesi ve yürütmesi gerekir.
Kötü SEO
Google ve Bing gibi arama motorları, JavaScript yüklü web sitelerinin dizine eklenmesini geliştirdi. Bununla birlikte, botlar ve tarayıcılar, sunucu tarafında oluşturulan web sitelerini, istemci tarafında oluşturulan web sitelerine göre dizine eklemeyi hâlâ daha kolay buluyor.
İstemci tarafında oluşturulan web siteleri, arama sonuçlarında o kadar kolay bulunamayabilir; bu da görünürlüklerini, organik trafiğini ve dönüşüm oranlarını olumsuz yönde etkileyebilir. Bu nedenle, arama motoru görünürlüğünün yüksek olması gereken açılış sayfaları, bloglar, medya yayınları ve e-ticaret platformları gibi web siteleri için istemci tarafı oluşturma yanlış bir yaklaşımdır.
Kullanıcının cihazına bağımlılık
İstemci tarafı oluşturma, büyük ölçüde kullanıcının cihazının işlem gücüne dayanır. Cihaz eskiyse veya yeterli kaynaklara sahip değilse, karmaşık JavaScript çerçevelerinin veya kitaplıklarının oluşturulması ve yürütülmesinde zorluk yaşayabilir.
Kullanıcının cihazına olan bu bağımlılık, farklı cihazlar ve tarayıcılar arasında tutarsız performansa yol açabilir. Tembel yükleme, varlık optimizasyonu ve kod bölme gibi performans optimizasyon stratejilerini uygulayarak bu sorunu çözebiliriz.
Client-side rendering ne zaman kullanılmalı?
İstemci sitesi oluşturma, diğer teknolojiler gibi, herkese uyan tek çözüm değildir. Bu nedenle, uygun kullanım durumlarını anlamak çok önemlidir. İstemci tarafı işlemenin doğru yaklaşım olduğu bazı senaryolar şunlardır:
Dinamik web uygulamaları
CSR, sosyal ağlar ve çevrimiçi mesajlaşma programları gibi birden fazla kullanıcıya sahip olan ve sık sık güncelleme gerektiren dinamik uygulamalar için mükemmel bir seçimdir. Bu uygulamalar, istemcide içerik oluşturarak, sayfanın tamamını yeniden yüklemeye gerek kalmadan gerçek zamanlı güncellemeleri gönderebilir ve bu da kullanıcı deneyimini bozabilir.
Dahili uygulamalar
CSR, analitik kontrol panelleri, yönetici panelleri, CRM sistemleri, LMS’ler ve çalışan portalları gibi dahili uygulamalar için çok uygundur. Bu tür uygulamalarda hız, etkileşim ve anlık güncellemeler ön plandadır.
SEO bir öncelik olmadığında
SEO önemli olsa da her web sitesinin veya uygulamanın arama motorlarında görünür olması gerekmez. Sohbet uygulamaları, sosyal platformlar ve dahili uygulamalar bu kategoriye girer.
Bu yazımızda csr nedir ve nasıl çalışır; avantajlarını ve dezavantajlarını gördük. Bir diğer yazımızda görüşmek üzere
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
