Render Modellerine Genel Bakış: SSR, SSG, ISR

Modern web uygulamalarında render stratejisi; TTFB (Time to First Byte), SEO skoru ve altyapı maliyetini doğrudan belirler. Yanlış mimari seçimi gereksiz sunucu yükü veya bayat veri sunumuna yol açar.

SSR (Server-Side Rendering): İstek anında sunucuda HTML üretimi. Her talepte render çalışır. Dinamik ve kullanıcıya özel veriler için zorunludur. Dezavantaj: Yüksek sunucu CPU kullanımı, artan TTFB.
SSG (Static Site Generation): Derleme (build) anında tüm HTML sayfalarının önceden üretilmesi. CDN üzerinden anında teslim. En yüksek performans. Dezavantaj: Değişen veriler için tüm projenin yeniden build edilmesi gerekir.
ISR (Incremental Static Regeneration): SSG hızını SSR esnekliğiyle birleştirir. Statik sayfalar arka planda belirli aralıklarla (cache revalidation) güncellenir. Tam build gerekmez.

Adım 1: Veri Akışı ve Güncellik İhtiyacını Belirleme

İlk adım, projenin veri tazeliği gereksinimini netleştirmektir.

Veri kullanıcı oturumuna özel mi (Dashboard, Profil)? SSR kullanın.
Veri nadiren mi değişiyor (Blog, Dokümantasyon, Hakkımızda)? SSG kullanın.
Binlerce ürün var, veri aralıklı değişiyor ama tam build süresi saatler sürüyor mu (E-ticaret)? ISR kullanın.

Adım 2: Rendering Stratejisini Kod Seviyesinde Uygulama

Modern web frameworklerinde (örnek: Next.js App Router) render stratejisi fetch ve route konfigürasyonuyla seçilir.

SSG Örneği (Statik Derleme)

// Build zamanında çalışır, statik HTML üretir
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

ISR Örneği (Arka Planda Yenileme)

// 60 saniyede bir sayfayı arka planda yeniden üretir
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  return {
    props: { products },
    revalidate: 60,
  };
}

SSR Örneği (Her İstekte Render)

// Her HTTP isteğinde sunucuda çalışır
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/user/${context.params.id}`);
  const user = await res.json();
  return { props: { user } };
}

Adım 3: Performans ve Cache Metriklerini Doğrulama

Stratejiyi seçtikten sonra aşağıdaki Core Web Vitals metriklerini test edin:

LCP (Largest Contentful Paint): SSG ve ISR CDN cache sayesinde en düşük LCP değerini sunar (< 1.2s).
TTFB (Time to First Byte): SSR mimarisinde sunucu gecikmesine bağlıdır; optimize edilmemiş DB sorguları TTFB değerini bozar.
Cache-Control Başlıkları: Edge CDN katmanında `s-maxage` ve `stale-while-revalidate` kurallarının doğru çalıştığından emin olun.

Dijital ajans ekipleri ve kurumsal projeler için modern web trendleri, tek bir render yöntemine bağlı kalmak yerine sayfa bazlı hibrit mimariyi (Edge + SSG + ISR) zorunlu kılar.

Karar Matrisi

Pazarlama ve Landing Sayfaları: SSG (Maksimum hız, sıfır sunucu yükü).
E-Ticaret Ürün ve Kategori Sayfaları: ISR (Hızlı açılış, periyodik stok/fiyat güncellemesi).
Kişiselleştirilmiş Paneller ve Gerçek Zamanlı Akışlar: SSR veya Client-Side Fetching (Anlık veri).