Yan yana

SSRvsCSR

SSR ile CSR arasındaki fark nedir?

Güncellendi 30 Eylül 20262 dk okuma7 fark

Kısaca

Sunucu tarafı oluşturmada (SSR) sunucu her istek için HTML'i tamamen hazırlar ve içerik hızlı görünür; CSR'da ise sayfayı tarayıcı JavaScript ile oluşturur.

Web Geliştirmes. 44

SSR

Sunucu Tarafı Render

SSR, 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.

SSR sayfasını oku

Web Geliştirmes. 10

CSR

İstemci Tarafı Render

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 sayfasını oku

SSR ve CSR karşılaştırması

Özellik	SSR	CSR
HTML'in üretildiği yer	Sunucuda, her istek için	Tarayıcıda, JavaScript çalıştırılarak
İlk içerik	Hızlı: HTML gelir gelmez gösterilir	Daha yavaş: JavaScript yüklenip çalıştıktan sonra gösterilir
Sonraki gezinme	Her sayfa için yeni bir sunucu yanıtı gerekebilir	Görünüm değişimleri hızlıdır; yalnızca veri çekilir
SEO	Tarayıcı botları tam HTML'i hemen alır	Botların içeriği görmek için JavaScript çalıştırması gerekir
Sunucu yükü	Daha yüksek: sunucu her istekte sayfayı oluşturur	Daha düşük: sunucu çoğunlukla statik dosyaları ve API'leri sunar
Barındırma	Kod çalıştıran bir sunucu ya da serverless ortam gerekir	CDN üzerinde statik dosya olarak barındırılabilir
En uygun olduğu yer	İçerik siteleri, online mağazalar ve aramada sıralanması gereken sayfalar	Panolar, dahili araçlar ve giriş arkasındaki etkileşimli uygulamalar

Fark, açıklamalı

Sunucu tarafı oluşturma (SSR), sunucunun her istek için sayfanın kodunu çalıştırıp hazır HTML döndürmesi demektir. İstemci tarafı oluşturma (CSR) ise sunucunun neredeyse boş bir HTML iskeletiyle bir JavaScript paketi göndermesi, sayfayı da tarayıcının bu kodu çalıştırarak kurması demektir; klasik tek sayfalık uygulamalar (SPA) böyle çalışır.

Temel fark, HTML'in nerede üretildiğidir ve bu, kullanıcının önce ne göreceğini değiştirir. SSR'de içerik HTML gelir gelmez görünür; bu da yavaş cihazlara ve arama motorlarına yardımcı olur. CSR'de kullanıcı JavaScript'in inmesini ve çalışmasını bekler, ama sonrasında görünümler arasında geçmek hızlıdır çünkü yalnızca veri çekilir.

Modern framework'ler ikisini karıştırır. Yaygın bir kalıpta ilk görünüm sunucuda oluşturulur ve ardından hydrate edilir; yani tarayıcı mevcut HTML'e JavaScript olay işleyicilerini bağlar, böylece sayfa etkileşimli hâle gelir ve sonraki gezinme istemcide gerçekleşir. Akış (streaming) ve kısmi hydration ise yalnızca gereken parçaları göndererek ya da etkinleştirerek daha da ileri gider.

Sık yapılan bir yanlış, sunucuda oluşturulan sayfaların JavaScript gerektirmediği düşüncesidir. SSR sayfası erken görünür, ama hydration bitene kadar düğmeler ve formlar yanıt vermeyebilir; bu yüzden büyük bir JavaScript paketi sayfayı yine de yavaş hissettirebilir.

Hangisini kullanmalısınız?

SSR şu durumlarda doğru seçim:

Sayfaların çoğu için arama görünürlüğü ve bağlantı önizlemeleri önemli.
Kullanıcıların çoğu yavaş telefonlarda ya da ağlarda.
İçerik kişiselleştiriliyor ya da her istekte değişiyor.

CSR şu durumlarda doğru seçim:

Uygulama, SEO'nun önemli olmadığı bir girişin arkasında.
Arayüz, editör ya da pano gibi çok etkileşimli.
Yalnızca statik dosyaları ve ayrı bir API'yi barındırmak istiyorsunuz.

Ürün listesinin HTML'e dönüştüğü yer

SSRjavascript

// SSR: the server builds the HTML before responding
app.get("/products", async (req, res) => {
  const products = await db.getProducts();
  const items = products
    .map((p) => `<li>${escapeHtml(p.name)}</li>`)
    .join("");

  res.send(`<html><body><ul>${items}</ul></body></html>`);
});

CSRjavascript

// CSR: the browser fetches data, then builds the HTML
const res = await fetch("/api/products");
const products = await res.json();

const list = document.createElement("ul");
for (const p of products) {
  const li = document.createElement("li");
  li.textContent = p.name;
  list.append(li);
}
document.getElementById("root").append(list);

Sık sorulan sorular

SEO için SSR, CSR'den daha mı iyi?

Genellikle evet. Arama motorları JavaScript'i çalıştırabilir, ama sunucuda oluşturulan HTML daha hızlı ve daha güvenilir dizinlenir; sohbet ve sosyal uygulamalardaki bağlantı önizlemeleri de çoğunlukla yalnızca ilk HTML'i okur.

SSR ve CSR birlikte kullanılabilir mi?

Evet, çoğu modern framework bunu yapar. İlk sayfa sunucuda oluşturulup hydrate edilir; ardından gezinme ve güncellemeler istemcide gerçekleşir.

CSR, tek sayfalık uygulamayla aynı şey mi?

Yakından ilişkili ama aynı değiller. CSR, HTML'in nerede üretildiğini anlatır; tek sayfalık uygulama ise yeni sayfa yüklemek yerine tek bir sayfayı güncelleyen uygulamayı anlatır ve genellikle CSR'ye dayanır.