Modern web uygulamalarinda rendering stratejisi seçimi, performans, SEO, geliştirme hizi ve operasyon maliyetini dogrudan etkiler. Server-Side Rendering (SSR), Single Page Application (SPA) ve hibrit modeller arasindaki fark yalnizca teknik degil; ürün hedefleri ve kullanıcı profili ile de ilgilidir. Doğru karar, metrik tanimlayarak ve prototip olcmeleri yaparak verilir.
SPA modelinin avantajlari ve sınırları
SPA, ilk yuklemeden sonra sayfa gecislerini istemci tarafinda yönetir. React Router, Vue Router veya Angular Router ile view degisimi tam sayfa yenilemesi gerektirmez. Bu model zengin etkilesimli arayüzler, gerçek zamanli guncellemeler ve offline-first senaryolarda gucludur. Geliştirici deneyimi de olumludur: hot reload, tek codebase ve zengin ekosistem.
Ancak SPA'nin dezavantajlari goz ardi edilmemelidir. Ilk içerik boyama (First Contentful Paint) büyük JavaScript bundle'lari nedeniyle gecikebilir. Arama motorlari JavaScript calistirabilse de indeksleme gecikmesi ve meta tag yönetimi ekstra dikkat gerektirir. Düşük güçlü cihazlarda hydration maliyeti kullanıcı deneyimini olumsuz etkileyebilir.
SSR ve isomorphic rendering
SSR her istekte veya build zamaninda HTML üretir ve istemciye hazir markup gonderir. Next.js, Nuxt, SvelteKit ve Remix bu alanda yaygın cercevelerdir. Sunucu tarafinda render edilen HTML, tarayici içeriği hemen gösterir; ardindan JavaScript yuklenerek hydration ile etkileşim kazanir.
Streaming SSR ile HTML parça parça iletilir; kullanıcı beklemek zorunda kalmaz. React 18 Suspense ve Next.js App Router bu modeli destekler. Edge SSR, CDN uzerinde düşük gecikmeli render sağlar ancak veritabanı baglantisi ve cold start dikkat gerektirir.
// Next.js App Router - server component
export default async function ProductPage({ params }) {
const product = await fetchProduct(params.id);
return (
<article>
<h1>{product.name}</h1>
<Price value={product.price} />
</article>
);
}Static Site Generation (SSG) ve ISR
Build zamaninda HTML üretmek en düşük TTFB sağlar. Blog, dokumantasyon ve pazarlama sayfalari icin idealdir. Incremental Static Regeneration (ISR) ile statik sayfalar belirli araliklarla veya on-demand yenilenir; hem performans hem guncellik dengelenir.
On-demand revalidation, içerik yayinlandiginda ilgili sayfayi invalid eder. Cache tag stratejisi ile ilişkili tüm sayfalar tek seferde guncellenebilir. Bu model e-ticaret katalog sayfalari icin sik tercih edilir.
Karar matrisi: hangi metrik ne soyluyor?
- TTFB: SSR/SSG genelde SPA'dan iyi; CDN ve edge ile optimize edilir.
- LCP: Kritik içerik sunucuda render edilirse iyilesir.
- TTI: SPA bazen daha iyi; hydration maliyeti SSR'da ek yük getirir.
- SEO: Içerik odaklı sitelerde SSR/SSG tercih edilir.
- Interactivity: Dashboard ve editor gibi uygulamalarda SPA veya partial hydration.
Core Web Vitals hedefleri Google arama siralamasini etkiler. Field data (CrUX) ile lab data (Lighthouse) birlikte değerlendirilmelidir. Tek bir Lighthouse skoru üretim karari icin yeterli degildir; percentil dagilimlari izlenmelidir.
Hibrit mimariler
Tam SPA veya tam SSR ikili seçim degildir. Islands architecture (Astro), partial hydration ve micro-frontends ile farklı bolgeler farklı stratejiler kullanabilir. Örneğin pazarlama sayfalari SSG, uygulama paneli SPA, ürün detaylari SSR olabilir.
Next.js'de client component direktifi ile etkilesimli parçalar isaretlenir; geri kalan server component olarak kalir. Bu ayrim bundle boyutunu dusurur ve veri cekme mantigini sunucuda tutar. Yanlış ayrim tüm sayfayi client component yaparak avantaji sifirlar.
Micro-frontend ve bagimsiz deploy
Büyük organizasyonlarda farklı ekipler farklı rendering stratejileri secebilir. Module Federation ile runtime entegrasyon veya iframe ile izolasyon mumkundur. Operasyonel maliyet artar: tutarlı routing, paylasilan tasarım sistemi ve gozlemlenebilirlik zorunlu hale gelir.
Veri cekme ve cache katmanı
SSR'da her istekte veri cekmek sunucu yukunu artirir. Stale-while-revalidate, Redis cache ve CDN cache katmanları TTFB'yi dusurur. SPA'da istemci cache'i TanStack Query ile yönetilir; background refetch ile guncellik korunur.
Ayni API hem SSR hem CSR tarafindan cagrilirsa response sozlesmesi ve hata yönetimi tutarlı olmalidir. GraphQL veya tRPC tek tip sözleşme sağlar. Over-fetching SSR'da HTML boyutunu, SPA'da gereksiz render'i artirir.
Güvenlik ve operasyon
SSR sunucusu dogrudan veritabanına erisebilir; secret yönetimi ve rate limiting kritiktir. SPA'da API anahtarlari istemciye sizamaz; BFF (Backend for Frontend) pattern'i sik kullanılır. Her iki modelde de CSP, XSS ve CSRF onlemleri uygulanmalidir.
Deploy pipeline farklidir: SPA statik hosting'e (S3, Netlify) gidebilir; SSR Node runtime veya serverless fonksiyon gerektirir. Cold start serverless SSR'da p99 gecikmesini etkiler; provisioned concurrency maliyet-getiri analizi yapilmalidir.
Goc senaryolari
Mevcut SPA'dan SSR'a geçiş kademeli yapilabilir: oncelikle SEO-kritik sayfalar SSR'a alinir, dashboard SPA kalir. Next.js pages router'dan app router'a geçiş planli migration gerektirir. Geriye donuk URL uyumlulugu ve redirect haritasi unutulmamali.
- Mevcut metrikleri olc ve hedef KPI tanımla.
- Pilot sayfa sec ve A/B test ile karşılaştır.
- Cache ve invalidation stratejisini tasarla.
- Monitoring ve alerting kur (TTFB, error rate, hydration mismatch).
- Kademeli rollout ile riski sinirla.
Maliyet ve ekip yetkinligi
SSR operasyonel olarak daha pahali olabilir: sunucu kapasitesi, izleme, ölçeklendirme. SPA statik hosting maliyeti düşüktür ancak SEO ve ilk yükleme icin ek optimizasyon gerektirir. Ekip Next.js veya Nuxt deneyimine sahip degilse öğrenme egrisi proje takvimini etkiler.
Karar dokumani yazmak gelecekteki tartismalari azaltir: secilen model, reddedilen alternatifler, olculen metrikler ve gozden gecirme tarihi. Teknoloji modasi yerine ürün gereksinimleri once gelmelidir. SSR vs SPA tartismasi doğru cevap degil, doğru bağlam sorusudur.
Pratik oneriler
Içerik agirlikli, az etkilesimli siteler: SSG veya SSR. Yüksek etkilesimli uygulamalar: SPA veya RSC ile hibrit. Mobil ag performansi kritikse ilk byte ve LCP onceliklidir. Geliştirme hizi ve tek ekip icin SPA baslangicta yeterli olabilir; trafik ve SEO baskisi arttikca hibrite geçiş planlanir.
Performans butcesi tanimlayin: maksimum bundle boyutu, maksimum TTFB, hedef LCP. CI pipeline'da Lighthouse CI veya Speedlify ile regresyon yakalayin. Rendering stratejisi bir kez secilip unutulmamali; ürün evrildikce periyodik gozden gecirme yapilmalidir.
CDN, edge cache ve HTML invalidation
SSR ciktisi CDN uzerinde cache'lenebilir; ancak kisisellestirilmis içerik cache key'ini kullanıcı segmentine gore ayirmayi gerektirir. Vary header Cookie veya Authorization ile dikkatli kullanilmazsa ya hic cache olmaz ya da yanlış kullanıcıya yanlış HTML gider. Surrogate key invalidation Fastly veya Cloudflare Workers ile toplu temizlik sağlar.
SPA statik asset'leri agresif cache'lenir (hash'li dosya adlari); HTML shell ise kisa TTL ile servis edilir. Service worker ile offline shell mümkün olsa da cache busting stratejisi deploy pipeline ile senkronize edilmelidir. Stale shell yeni API sozlesmesi ile uyumsuzluk üretir.
Hydration mismatch ve debug
SSR ve istemci render ciktisi farklı oldugunda React hydration mismatch uyarisi verir. Tarih/saat, rastgele ID veya window genisligi sunucuda farklı hesaplanirsa sorun cikar. Çözüm: bu degerleri useEffect ile istemcide üretmek veya suppressHydrationWarning yalnizca gercekten gerekli yerlerde kullanmak. Production'da mismatch sessiz performans kaybina yol acar.
Selective hydration ile öncelikli bolgeler once etkilesimli hale gelir. Suspense boundary'ler streaming sirasinda kullanıcıya anlamli içerik gosterirken arka planda JavaScript yuklenmesini bekler. Bu teknik LCP ile TTI arasindaki boslugu kapatmaya yardım eder.
Gerçek dünya ornekleri
Haber sitesi: SSR veya SSG ile anlik TTFB, AMP veya RSS ile dagitim. E-ticaret liste sayfasi: ISR ile saatlik güncelleme, sepet ve odeme SPA. SaaS dashboard: tam SPA veya RSC ile sadece veri tablolarinda server render. Her ornekte kullanıcı yolculugunun hangi adiminda hangi metrik öncelikli olduğu farklidir.
Karar verirken rakip analizi ve sektor benchmark'i tek basina yeterli degildir; kendi trafik profiliniz (mobil oran, bot orani, tekrar ziyaret) önemlidir. Bot trafigi SSR sunucu maliyetini artirir; rate limit ve cache katmanı bu yuku hafifletir. Sonuç olarak rendering seçimi ürün omru boyunca evrilen stratejik bir yatirimdir.
