SSR (Sunucu Taraflı Render) Nedir?
Kısa tanım
SSR (Server-Side Rendering, sunucu taraflı render), bir web sayfasının HTML'inin her istekte sunucuda üretilip tarayıcıya içeriğiyle birlikte hazır gönderilmesidir. Tarayıcı, JavaScript çalışmadan önce metni ve bağlantıları gösterebilir; arama motorları ve diğer tarayıcılar da içeriği doğrudan HTML yanıtında bulur. Modern framework'lerde SSR genellikle sayfayı etkileşimli hâle getiren hydration adımıyla birlikte kullanılır.
Diğer adları: Server-Side Rendering, sunucu tarafında render, sunucu taraflı oluşturma, server rendering
Render stratejileri: CSR, SSR, SSG ve ISR
Burada “render”, veriyi ve şablonları birleştirip tarayıcının göstereceği HTML'i üretme işidir. Bu işin nerede ve ne zaman yapıldığı; sitenin hızını, sunucu maliyetini ve arama motorlarına nasıl göründüğünü belirler.
| Yaklaşım | HTML nerede ve ne zaman üretilir? | Uygun olduğu durumlar |
|---|---|---|
| CSR (Client-Side Rendering) | Tarayıcıda; sunucu çoğunlukla boş bir kabuk ve JavaScript paketi gönderir | Giriş gerektiren paneller, aramada görünmesi gerekmeyen uygulama ekranları |
| SSR | Sunucuda, her istekte | Kişiye, konuma veya anlık veriye göre değişen sayfalar |
| SSG (Static Site Generation) | Derleme (build) sırasında bir kez | Blog yazıları, kurumsal sayfalar, dokümantasyon |
| ISR (Incremental Static Regeneration) | Derlemede üretilir; belirlenen süre dolunca veya tetiklendiğinde arka planda yenilenir | Sık güncellenen ama saniyesi saniyesine güncel olması gerekmeyen katalog ve içerik sayfaları |
ISR, Next.js'in kullandığı bir terimdir; başka framework'ler benzer davranışı farklı adlarla sunar. Gerçek projelerde bu yaklaşımlar bir arada kullanılır: aynı sitede tanıtım sayfaları statik, hesap ekranları CSR, ürün sayfaları SSR olabilir.
SSR adım adım
- Tarayıcı bir URL ister.
- Sunucu gerekli veriyi veritabanından veya bir API'den alır ve bileşenleri HTML'e dönüştürür.
- İçeriği dolu HTML yanıt olarak gönderilir; tarayıcı bunu hemen çizebilir.
- Sayfanın etkileşimli olması gerekiyorsa JavaScript yüklenir ve mevcut HTML'e bağlanır. Bu adıma hydration denir.
Bazı framework'ler HTML'i tek parça hâlinde değil akış (streaming) olarak gönderir: hazır olan kısımlar hemen iletilir, yavaş veri bekleyen bölümler hazır oldukça eklenir.
SEO açısından anlamı
SSR ve statik üretimde ana içerik, başlıklar, iç bağlantılar ve meta etiketler ilk HTML yanıtında yer alır. Google JavaScript çalıştırabilir; ancak sayfayı önce tarar, oluşturmayı ayrı bir adımda yapar. Bu adım gecikebilir ve tek bir betik hatası içeriğin hiç oluşmamasına yol açabilir. Konunun ayrıntıları JavaScript SEO maddesinde. Diğer arama motorları ve birçok yapay zekâ tarayıcısı için JavaScript'in çalıştırılacağını varsaymak daha da risklidir; içerik ham HTML'de yoksa bu sistemler sayfayı boş görebilir.
Google, yalnızca botlara sunucuda oluşturulmuş bir sürüm gösteren dynamic rendering yönteminin uzun vadeli bir çözüm olmadığını, bunun yerine SSR, statik render veya hydration kullanılmasını önerdiğini resmi dokümantasyonunda açıkça belirtir. Öte yandan Google'ın SSR'ı kendi başına bir sıralama avantajı olarak ödüllendirdiğine dair bir açıklaması yoktur; fayda, içeriğin güvenilir biçimde erişilebilir olmasından ve genellikle daha hızlı görüntülenmesinden gelir.
Bedeli ve dikkat edilecekler
- Sunucu yükü: her istekte render işlem gücü ister. Sık değişmeyen sayfalarda SSG, ISR veya önbellek çoğu zaman daha verimlidir.
- İlk baytın gecikmesi (TTFB): sunucu yavaş bir veri kaynağını beklerse yanıt geç başlar ve bu, LCP'yi de geciktirir.
- Görünür ama tepkisiz an: HTML çizildikten sonra hydration bitene kadar butonlar yanıt vermeyebilir; büyük JavaScript paketleri bu aralığı uzatır.
- Tarayıcıya özgü kod:
windowveyalocalStoragesunucuda yoktur. Render sırasında bunlara erişmek hataya ya da sunucu ile istemci çıktısı arasında uyumsuzluğa yol açar.
Nasıl kontrol edilir?
Basit bir test: sayfanın kaynağını görüntüleyin veya curl ile indirin ve ana metnin, H1'in ve iç bağlantıların ham HTML'de olup olmadığına bakın. Search Console'daki URL Denetleme aracı Google'ın oluşturduğu HTML'i gösterir. Doruva'nın SEO Analiz Aracı da ham yanıt ile tarayıcıda oluşturulmuş sayfa arasındaki farkları ayrı bulgular olarak raporlar.