CSR
İstemci Tarafı Render
Kısaca
CSR, tarayıcının çoğunlukla boş bir HTML sayfası ile JavaScript indirip sayfa içeriğini kullanıcının cihazında oluşturduğu render yaklaşımıdır.
CSR nedir?
İstemci tarafı render'da (client-side rendering) sunucu, bir JavaScript paketiyle birlikte çoğu zaman boş bir <div id="root"></div>'den biraz fazlası olan asgari bir HTML dosyası gönderir. Tarayıcı bu JavaScript'i indirip çalıştırır; JavaScript bir API'den veri çeker ve DOM'u doğrudan kullanıcının cihazında oluşturarak sayfa içeriğini üretir.
CSR, tek sayfalı uygulamaların klasik çalışma biçimidir. İlk yüklemeden sonra ağ üzerinden yalnızca veri taşındığı için gezinme hızlıdır ve sunucu basit bir statik dosya barındırıcısı ya da CDN olabilir. Bu da CSR'ı panolar, editörler ve yönetim panelleri gibi oturum arkasındaki yüksek etkileşimli uygulamalar için uygun kılar.
Başlıca dezavantajı ilk yüklemedir. JavaScript inip çalışana kadar kullanıcılar boş bir ekran ya da bir yükleme göstergesi görür; bu, özellikle düşük donanımlı telefonlarda ve kötü ağlarda yavaştır. JavaScript çalıştırmayan tarayıcılar (crawler), aralarında birçok yapay zekâ tarayıcısı da olmak üzere, yalnızca boş kabuğu görebilir ve bu SEO'ya zarar verir.
CSR, SSR ve SSG arasındaki fark esas olarak HTML'in nerede ve ne zaman üretildiğidir. CSR'da sayfa görüntülenirken tarayıcıda, SSR'da her istek için sunucuda, SSG'de ise önceden bir derleme makinesinde üretilir. Birçok modern site üçünü de karıştırır; örneğin statik tanıtım sayfaları, sunucuda render edilen ürün sayfaları ve istemcide render edilen bir hesap panosu gibi.
Önemli noktalar
- CSR, sayfayı tarayıcıda JavaScript ile oluşturur.
- Sunucu asgari bir HTML kabuğu ve bir betik paketi gönderir.
- İlk yüklemeden sonraki gezinme hızlıdır ve yalnızca veri gerektirir.
- İlk yükleme daha yavaştır ve JavaScript çalıştırmayan tarayıcılar çok az içerik görür.
- CSR tarayıcıda, SSR istek başına sunucuda, SSG ise derleme zamanında render eder.
Örnek
<!-- What the server sends: an empty shell and a script -->
<body>
<ul id="app">Loading...</ul>
<script type="module">
// The browser fetches data and builds the content itself
const res = await fetch("/api/products");
const products = await res.json();
const items = products.map((p) => {
const li = document.createElement("li");
li.textContent = p.name;
return li;
});
document.querySelector("#app").replaceChildren(...items);
</script>
</body>Sık sorulan sorular
CSR ile SSR arasındaki fark nedir?
CSR'da tarayıcı neredeyse boş bir sayfa alır ve içeriği JavaScript ile oluşturur. SSR'da ise sunucu her istek için hazır HTML gönderir; içerik daha erken görünür ve tarayıcılar betik çalıştırmadan okuyabilir.
İstemci tarafı render SEO için kötü müdür?
Olabilir. Google JavaScript'i render edebilir ama dizine ekleme gecikebilir; yapay zekâ tarayıcıları dahil birçok diğer tarayıcı ise yalnızca ilk HTML'i okur. Aramada üst sıralara çıkması gereken sayfalar genellikle bunun yerine SSR ya da SSG ile render edilir.
İstemci tarafı render'ı ne zaman kullanmalıyım?
CSR, arama sonuçlarında görünmesi gerekmeyen, yüksek etkileşimli sayfalara (panolar, yönetim panelleri ve oturum arkasındaki araçlar) uygundur. Herkese açık içerik sayfalarında SSR ya da SSG genellikle daha hızlı bir ilk görünüm sağlar.
Sık karşılaştırılanlar
İlgili sayfalar
- SSRWeb Geliştirme, s. 44SSR, sunucunun her istekte bir sayfanın tam HTML'ini oluşturduğu ve böylece kullanıcıların ile arama motorlarının hazır içeriği hemen aldığı tekniktir.
- SSGWeb Geliştirme, s. 43SSG, bir sitenin sayfalarını derleme zamanında düz HTML dosyalarına dönüştüren tekniktir; sunucular ya da CDN'ler bunları ek iş yapmadan anında sunabilir.
- SPAWeb Geliştirme, s. 42SPA, tek bir HTML sayfası yükleyip içeriği JavaScript ile güncelleyen ve görünümler arası geçişte sayfayı yeniden yüklemeyen web uygulamasıdır.
- JavaScriptWeb Geliştirme, s. 25JavaScript, web tarayıcılarında sayfaları etkileşimli hale getiren ve Node.js gibi çalışma ortamlarıyla sunucularda da çalışan programlama dilidir.
- HydrationWeb Geliştirme, s. 23Hydration, tarayıcıdaki JavaScript'in sunucuda üretilmiş HTML'i devralıp olay yöneticilerini ve durumu bağlayarak sayfayı etkileşimli hale getirdiği adımdır.
- SEOWeb Geliştirme, s. 40SEO, arama motorlarının bir sitenin sayfalarını bulup anlaması ve ilgili aramalarda sıralaması için içeriği ve teknik altyapıyı iyileştirme pratiğidir.
Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin