İçeriğe geç
parazade
Yazılım & No-Code

CSR Nedir?

İngilizce: Client-Side Rendering

Yayın: · Son güncelleme:

CSR Nedir? Kısaca

CSR (Client-Side Rendering), web sayfasının içeriğinin sunucu yerine kullanıcının tarayıcısında JavaScript ile oluşturulmasıdır. Tek sayfa uygulamalarında yaygındır ve sayfa geçişlerini hızlı hâle getirir.

CSR nedir?
İçindekiler
  1. CSR nedir?
  2. Nasıl çalışır?
  3. Artıları ve eksileri

CSR nedir?

CSR, "Client-Side Rendering" yani istemci tarafı oluşturma anlamına gelir. Sunucu, tarayıcıya içi neredeyse boş bir HTML dosyası ve büyük bir JavaScript paketi gönderir. Sayfadaki menüleri, listeleri ve metinleri tarayıcı bu JavaScript'i çalıştırarak kendisi üretir.

Türkçe kaynaklarda CSR kısaltması kurumsal sosyal sorumluluk anlamında da geçer. Web geliştirme bağlamında ise her zaman istemci tarafı oluşturmayı ifade eder.

Nasıl çalışır?

İlk açılışta tarayıcı JavaScript dosyalarını indirir, çalıştırır ve gerekirse API üzerinden veri çeker. Sonra sayfa DOM'a çizilir. Bundan sonraki sayfa geçişlerinde sunucudan yeni HTML istenmez, yalnızca veri alınıp ekran güncellenir.

Örneğin bir proje yönetim aracında görev panosundan takvime, oradan raporlara geçtiğinizi düşünün. Sayfa beyaz ekranla yenilenmez, geçişler anında olur. React veya Vue ile yazılmış tek sayfa uygulamalar (SPA) varsayılan olarak bu şekilde çalışır.

Artıları ve eksileri

CSR, giriş yapılarak kullanılan paneller ve yoğun etkileşimli uygulamalar için uygundur. Sunucu yükü azalır, çünkü sayfa üretme işini kullanıcının cihazı yapar.

Eksi tarafta ilk açılış yavaşlayabilir. JavaScript paketi büyükse, özellikle zayıf telefonlarda kullanıcı bir süre boş ekran görür. Arama motorlarının içeriği görmesi de SSR kadar kolay değildir. Arama trafiği önemli olan sayfalarda bu yüzden SSR ya da statik üretim tercih edilir, panel kısmında CSR kullanılmaya devam edilir.

Sıkça Sorulan Sorular

CSR ne demek?

Web geliştirmede CSR, Client-Side Rendering yani sayfanın tarayıcıda JavaScript ile oluşturulması demektir. İş dünyasında aynı kısaltma kurumsal sosyal sorumluluk için de kullanılır.

CSR ile yapılan site Google'da çıkar mı?

Google JavaScript çalıştırabildiği için çoğu zaman içerik dizine eklenir. Ancak bu süreç daha yavaş ve hataya açık olabilir, bu yüzden önemli sayfalarda SSR veya statik üretim daha güvenlidir.

İlgili terimler

SSR(Server-Side Rendering)SSR (Server-Side Rendering), bir web sayfasının HTML içeriğinin her istekte sunucuda oluşturulup tarayıcıya hazır biçimde gönderilmesidir. Sayfanın ilk açılışını hızlandırır ve arama motorlarının içeriği kolayca okumasını sağlar.React.jsReact.js, Meta (eski adıyla Facebook) tarafından geliştirilen, kullanıcı arayüzlerini yeniden kullanılabilir bileşenlerle kurmayı sağlayan açık kaynaklı bir JavaScript kütüphanesidir. Tek sayfa web uygulamalarında çok yaygındır.JavaScriptJavaScript, web sayfalarına buton tıklaması, form doğrulama ve anlık güncelleme gibi etkileşimler kazandıran, tarayıcıların yanı sıra Node.js ile sunucuda da çalışabilen yaygın bir programlama dilidir.İstemci(Client)İstemci (client), bir ağ üzerinden sunucuya istek gönderip ondan veri veya hizmet alan cihaz ya da yazılımdır. Web tarayıcısı, mobil uygulama ve e-posta programı yaygın istemci örnekleridir.HTMLHTML (HyperText Markup Language), web sayfalarının başlık, paragraf, bağlantı, görsel ve form gibi içerik yapısını etiketlerle tanımlayan ve tarayıcıların sayfayı nasıl göstereceğini belirleyen standart işaretleme dilidir.REST APIREST API, uygulamaların HTTP protokolü üzerinden ve genellikle JSON biçiminde veri alışverişi yaptığı, REST mimari ilkelerine dayanan uygulama programlama arayüzüdür. Web'de en yaygın API türüdür.