Sunucu tarafı render (SSR): sayfa HTML'i nerede üretilir?

SSR nedir?

SSR (Server-Side Rendering), Türkçe adıyla sunucu tarafı render, bir web sayfasının HTML'inin kullanıcının tarayıcısında değil, sunucuda üretilmesi yaklaşımıdır. Tarayıcı bir adres istediğinde sunucu veriyi çeker, sayfayı bileşenlerle birleştirir ve hazır HTML'i geri gönderir. Kullanıcı ilk bakışta boş bir iskelet değil, içeriği dolu bir sayfa görür.

Bunun karşıtı istemci tarafı render'dır (CSR). Orada tarayıcıya neredeyse boş bir HTML ve büyük bir JavaScript paketi gider; sayfa içeriği JavaScript çalıştıktan sonra tarayıcıda oluşur. İkisi arasındaki fark, içeriğin nerede ve ne zaman hazırlandığıdır.

SSR nasıl çalışır?

Akış adım adım şöyledir:

• Tarayıcı bir sayfa adresi için istek gönderir.
• Sunucu, o isteğe uygun veriyi veritabanından ya da bir servisten alır.
• Sunucu, arayüz bileşenlerini bu veriyle çalıştırıp tam bir HTML metni üretir.
• HTML tarayıcıya gönderilir ve tarayıcı sayfayı hemen çizebilir.
• Ardından JavaScript yüklenir ve sayfaya "canlanma" kazandırır. Buna hidrasyon (hydration) denir: Hazır HTML üzerine olay dinleyicileri bağlanır, tıklamalar ve formlar çalışır hâle gelir.

Sonuçta kullanıcı içeriği JavaScript yüklenmeden görür, ama sayfa etkileşime hidrasyon tamamlandıktan sonra tam açılır. Bu anlar arasındaki boşluk, SSR'de dikkat edilen performans konularından biridir.

SSR ile CSR, SSG ve ISR farkı

Render modelleri sıklıkla karıştırılır:

• CSR: HTML tarayıcıda oluşur. Sunucu işi azdır, ama ilk görüntü gecikebilir ve arama motorları için içerik geç görünür olabilir.
• SSR: HTML her istekte sunucuda üretilir. Her ziyaretçiye güncel ya da kişiye özel içerik verilebilir, ama sunucuya istek başına iş düşer.
• SSG (statik üretim): HTML yayın öncesinde bir kez üretilir ve hazır dosya olarak sunulur. Çok hızlıdır, ama içerik derleme zamanında sabitlenir.
• ISR (artımlı yeniden üretim): Statik sayfa belirli aralıklarla ya da tetiklenince arka planda yeniden üretilir. Statik hızı ile güncelliği dengelemeye çalışır.

Bu ayrım ya-ya-da şeklinde değildir. Modern çatılarda aynı uygulamada ana sayfa statik, ürün detayı ISR, kullanıcı paneli SSR olabilir.

Örnek: ürün sayfası

Örneğin bir e-ticaret sitesinde ürün sayfası ele alalım. CSR ile sayfa, ürün bilgisini API'den çeken bir JavaScript çalıştırana kadar boş görünür; arama motoru botu içeriği geç ya da eksik görebilir. SSR ile sunucu, ürün adını, açıklamasını ve fiyatını çekip HTML'e yerleştirir; sayfa tarayıcıya içerikle dolu ulaşır.

Stok ve fiyatın sık değiştiği bir kataloğta SSR güncel veriyi her istekte göstermeyi kolaylaştırır. Değişmeyen bir kampanya sayfasında ise SSG daha ucuz ve hızlı bir tercih olabilir. Kararı sayfanın veri ihtiyacı ve değişme sıklığı belirler.

SSR'nin avantajları ve bedelleri

Avantajlar:

• İlk içerik görüntüsü daha erken gelebilir, özellikle yavaş cihaz ve ağlarda.
• Arama motorları ve sosyal medya önizleme botları sayfanın içeriğini doğrudan HTML'de bulur.
• Kişiye özel ya da çok güncel içerik her istekte taze üretilebilir.

Bedeller:

• Sunucu her istekte iş yapar; trafik arttıkça hesaplama ve önbellek yönetimi önem kazanır.
• İlk bayta kadar geçen süre, veri kaynağı yavaşsa uzayabilir.
• Hidrasyon sırasında sayfa görünür ama henüz tıklanamaz olabilir.
• Geliştirme ve hata ayıklama, istemci ve sunucu ortamı birlikte düşünüldüğü için daha karmaşıktır.

Sık yapılan hatalar

• Her sayfayı SSR yapmak: İçeriği hiç değişmeyen sayfalar için SSG ya da önbellek çok daha verimlidir.
• Önbelleği hiç kullanmamak: Aynı HTML'i her istekte yeniden üretmek sunucuyu gereksiz yorar. Ara katman önbelleği (CDN) ve veri önbelleği tasarımın parçası olmalıdır.
• Sunucu ve tarayıcı çıktısının uyuşmaması: Sunucuda üretilen HTML ile tarayıcıdaki ilk render farklı olursa hidrasyon hatası çıkar. Tarih, rastgele değer ya da yalnızca tarayıcıda bulunan bir bilgi doğrudan kullanıldığında bu sık yaşanır.
• Kişisel veriyi önbelleğe koymak: Kullanıcıya özel bir sayfa paylaşılan önbelleğe girerse başkasına gösterilebilir.
• Ölçmemek: SSR'nin gerçekten fayda sağlayıp sağlamadığı, gerçek kullanıcı metrikleriyle izlenmelidir.

Mindset programlarında SSR

SSR'yi uygulamalı çalışmak isteyenler için Mindset kataloğunda ilgili eğitimler bulunur. Server-Side Rendering ve Edge Rendering Stratejileri eğitiminin modülleri Render Modelleri ve Hidrasyon, Statik Üretim ve Artımlı Yeniden Üretim, Sunucu Tarafı Render ve Veri Akışı, Edge Render ve Dağıtık Çalışma, Önbellek Mimarisi ve Tutarlılık, Ölçüm, Maliyet ve Karar Çerçevesi başlıklarını içerir. Next.js ile Full-Stack Web Uygulamaları eğitiminde App Router Mimarisi, Veri Getirme ve Önbellekleme, Performans ve Kullanıcı Deneyimi gibi modüller yer alır.