SSR (Server-Side Rendering) Nedir ve Ne İşe Yarar?
SSR, yani server-side rendering, her kullanıcı isteğinde sayfanın sunucu tarafında oluşturulup tarayıcıya HTML olarak gönderilmesidir. Next.js bunu getServerSideProps fonksiyonu veya App Router'da doğrudan bir server bileşeni ile gerçekleştirir. Sayfa, her defasında sunucudan taze içerik ile döner. Bu sayede dinamik veriye dayalı içeriklerde kullanıcıya en güncel hal gösterilir. Özellikle kullanıcıya özel içerik sunulacak uygulamalarda (örneğin admin panelleri, kişisel dashboard’lar) SSR etkili sonuç verir.
Sunucu tarafında işlenen HTML çıktısı, istemciye gönderilmeden önce hazırlandığı için SEO açısından oldukça avantajlıdır. Google, Bing gibi arama motorları bu yapıyı çok daha kolay tarar. SSR aynı zamanda içeriğin hızlı yüklenmesini sağlar. Kullanıcı, JavaScript yüklenmeden önce bile sayfayı görebilir. Ancak SSR, her istek için sunucunun aktif çalışmasını gerektirir. Bu da performans ve maliyet açısından dikkatli olunması gereken bir noktadır. SSR kullanan uygulamalarda cache (önbellekleme) stratejileri hayati önem taşır. Yoksa trafik arttığında sunucu yanıt süreleri uzayabilir.
Örnek kod (JavaScript - Next.js 14):
CSR (Client-Side Rendering) Ne Zaman Tercih Edilir?
CSR, yani client-side rendering, sayfanın tarayıcı tarafında JavaScript ile oluşturulmasıdır. Next.js, React bileşenlerinin istemci tarafında kullanılmasına olanak tanır. Bu yöntem, özellikle kullanıcı etkileşiminin yoğun olduğu SPA (single-page application) türü projelerde tercih edilir. CSR ile HTML çıktısı ilk başta boş gelir, ardından tarayıcıda JavaScript yüklenir ve sayfa oluşturulur. Bu da ilk içerik gösterimi süresini (TTFB) artırabilir.
CSR genellikle oturum açmış kullanıcıların etkileşimli işlemler yaptığı yerlerde işe yarar. Örneğin kullanıcı profili ayarları, canlı filtreleme, grafik panelleri gibi alanlar CSR için uygundur. Ancak CSR tek başına SEO dostu değildir. Tarayıcıdan gelen HTML içeriği ilk etapta boş olduğundan botlar içeriği göremeyebilir. Bu yüzden SEO önemliyse CSR yerine hybrid çözümler önerilir.
Örnek kod (JavaScript - React):
ISR (Incremental Static Regeneration) Nasıl Çalışır?
ISR, Next.js’in sunduğu en güçlü ve hibrit render yöntemlerinden biridir. İlk sayfa statik olarak build sırasında oluşturulur. Daha sonra belirli bir süre sonra (revalidate süresi) güncellenir. Bu sayede hem performanslı bir statik çıktı sunulur hem de sayfa belli aralıklarla güncel kalır. ISR, statik site üretiminden çok daha ölçeklenebilir bir yapı sunar.
ISR, içerik değişim sıklığı düşük olan ama yine de güncel kalması istenen sayfalar için idealdir. Blog yazıları, ürün detayları, kampanya sayfaları gibi içerikler için çok uygundur.
Örnek kod (JavaScript - Next.js 14):
Ne Zaman Hangi Render Türünü Kullanmalı?
- Üye girişi gerektiren, kişiye özel veriler: SSR
- SEO odaklı, nadiren değişen içerikler: ISR
- Kullanıcı etkileşimli, oturum bazlı paneller: CSR
- Çok fazla trafik alan ama yavaş değişen sayfalar: ISR
- Sayfa her istekte taze veri çekmeli: SSR
- Arama motorları içeriği görebilmeli: SSR veya ISR
- Hızlı etkileşim, canlı güncellemeler: CSR
App Router ile Render Seçimi Nasıl Yapılır?
Next.js 14 ile gelen App Router yapısı, SSR, ISR ve CSR arasında seçim yapmayı daha okunabilir ve modüler hale getiriyor. Her page.tsx dosyası içinde doğrudan revalidate, fetchCache, cache, force-dynamic gibi metadata değerleri tanımlanarak hangi render mantığının kullanılacağı belirlenebiliyor.
Örnek kod (JavaScript - App Router Metadata):
Performans ve SEO Karşılaştırması
| Özellik | SSR | CSR | ISR |
|---|---|---|---|
| İlk Yüklenme | Orta | Yavaş | Hızlı |
| SEO | Çok İyi | Kötü | İyi |
| Dinamik Veri | Anında | Tarayıcıda | Gecikmeli |
| Trafik Ölçeği | Kısıtlı | Çok Yüksek | Dengeli |
| Kod Karmaşıklığı | Orta | Az | Orta |
| Altyapı Maliyeti | Yüksek | Düşük | Orta |
Sıkça Sorulanlar:
SSR ile ISR arasındaki en büyük fark nedir?
SSR her istekte sunucuda yeni sayfa üretir. ISR ise build sonrası bir kez üretip belirli aralıklarla günceller. SSR daha taze içerik sunar ama maliyeti yüksektir.
CSR neden SEO için uygun değildir?
CSR’da sayfa içeriği ilk etapta boş gelir ve JavaScript ile sonra doldurulur. Bu yüzden arama motorları içeriği göremeyebilir. SSR veya ISR SEO için daha uygundur.
ISR’de revalidate süresi dolmadan sayfa değişirse ne olur?
Kullanıcılar eski sürümü görmeye devam eder. Yeni içerik, bir sonraki istekten sonra arka planda güncellenir. Bu süreç kullanıcıya yansımaz.