CSR vs SSR: Client-Side mı Server-Side Rendering mı?
Yeni bir web projesi başlatırken karşılaştığımız en kritik kararlardan biri: CSR (Client-Side Rendering) mi, yoksa SSR (Server-Side Rendering) mi kullanacağız?
Bu karar sadece teknik bir tercih değil - projenizin performansını, SEO başarısını, kullanıcı deneyimini ve hatta geliştirme maliyetlerini doğrudan etkiliyor. Gelin bu iki rendering yöntemini derinlemesine inceleyelim ve hangi senaryoda hangisinin daha doğru olduğunu keşfedelim.
🔑 En Temel Fark Nedir?
HTML nereden geliyor? Sunucudan mı, tarayıcıdan mı?
🖥️ SSR
HTML sunucuda hazırlanır ve tarayıcıya tamamlanmış gelir.
Sunucu: ✅ HTML oluştur
Tarayıcı: 📥 Hazır HTML al🌐 SPA (CSR)
HTML tarayıcıda JavaScript ile oluşturulur. Sunucu boş HTML gönderir.
Sunucu: 📄 Boş HTML gönder
Tarayıcı: ⚙️ JS ile doldur
Basit Analoji:
SSR: Restoranda hazır tabak servis 🍽️ (Sunucu pişiriyor)
SPA: Malzemeleri alıp kendiniz pişiriyorsunuz 👨🍳 (Tarayıcı pişiriyor)
CSR vs SSR tartışmasının özünde bu soru var: "HTML'i kim oluştursun - sunucu mu, tarayıcı mı?"
🚀 CSR (Client-Side Rendering) Nedir?
CSR, HTML'in tarayıcıda JavaScript ile oluşturulduğu bir rendering yöntemidir. Sunucu sadece boş bir HTML şablonu gönderir, içerik tamamen client tarafında (tarayıcıda) render edilir.
💡 CSR ve SPA İlişkisi
CSR genellikle SPA (Single Page Application) mimarisinde kullanılır. Ama aynı şey değildir:
- CSR: Rendering yöntemi → HTML'in tarayıcıda oluşturulması
- SPA: Uygulama mimarisi → Tek sayfalı uygulama yapısı
- İlişki: SPA'lar genelde CSR kullanır (React, Vue, Angular gibi)
Kısaca: CSR nasıl yapıldığını, SPA ise ne yapıldığını anlatır. Genelde birlikte kullanılırlar: SPA + CSR
🔧 CSR Nasıl Çalışır?
// 1. İlk yükleme - Tüm JavaScript bundle indirilir
// index.html
<div id="root"></div>
<script src="app.bundle.js"></script>
// 2. React/Vue uygulaması DOM'u render eder
ReactDOM.render(<App />, document.getElementById('root'));
// 3. Sayfa geçişleri - Sadece veri çekilir, HTML render edilmez
// Örnek: /products'tan /about'a geçiş
router.push('/about'); // ❌ Sayfa yenilenmez
fetch('/api/about').then(data => updateUI(data)); // ✅ Sadece veri gelir
✅ CSR Avantajları
- Hızlı navigasyon: Sayfa geçişleri anlık
- Zengin UX: Native app benzeri deneyim
- Düşük sunucu yükü: Backend sadece API
- Offline çalışma: Service Worker desteği
- Geliştirme hızı: Frontend/Backend ayrımı
❌ CSR Dezavantajları
- İlk yükleme yavaş: Büyük JavaScript bundle
- SEO zorlukları: İçerik JS ile render edilir
- JavaScript bağımlılığı: JS kapalıysa çalışmaz
- Güvenlik: API key'ler client-side
- Paket boyutu: Bundle size büyür
💡 CSR İçin İdeal Senaryolar
- 🎨 Dashboard & Admin Panel: Kullanıcı giriş yaptıktan sonra SEO gereksiz
- 📊 SaaS Uygulamaları: Notion, Figma, Trello gibi araçlar
- 💬 Sosyal Medya Feed'leri: Gerçek zamanlı veri akışı
- 🎮 Oyun & İnteraktif Uygulamalar: Yüksek kullanıcı etkileşimi
⚡ SSR (Server-Side Rendering) Nedir?
SSR, her sayfa isteğinde HTML'in sunucuda render edilip kullanıcıya gönderildiği bir mimaridir. Next.js, Nuxt.js gibi framework'ler SSR'ı kolaylaştırır.
🔧 SSR Nasıl Çalışır?
// 1. Kullanıcı /products sayfasını ister
// Tarayıcı: GET https://example.com/products
// 2. Next.js sunucusu veriyi çeker ve HTML render eder
export async function getServerSideProps() {
const products = await fetch('https://api.example.com/products');
return { props: { products } };
}
// 3. Render edilen HTML kullanıcıya gönderilir
<html>
<body>
<h1>Ürünler</h1>
<div class="product">Ürün 1</div> // ✅ HTML olarak gelir
<div class="product">Ürün 2</div>
</body>
</html>
// 4. Hydration - React kodları devreye girer
// Sayfa artık interaktif hale gelir
✅ SSR Avantajları
- SEO dostu: Botlar HTML içeriği görür
- Hızlı ilk render: FCP/LCP skorları yüksek
- Sosyal medya paylaşım: Meta tag'ler önceden var
- Düşük cihazlara uygun: İşlemci yükü sunucuda
- Güvenlik: API key'ler sunucuda kalır
❌ SSR Dezavantajları
- Sunucu maliyeti: Her istek sunucu işlemi
- Yavaş navigasyon: Her sayfa geçişi sunucu isteği
- Karmaşık altyapı: Cache, CDN yönetimi
- TTFB yüksek: Sunucu render süresi
- Geliştirme zorluğu: Client/Server kod ayrımı
💡 SSR İçin İdeal Senaryolar
- 🛒 E-Ticaret Siteleri: Amazon, Trendyol gibi (SEO kritik)
- 📰 Haber & Blog Platformları: Medium, Dev.to (içerik odaklı)
- 📖 Kurumsal Web Siteleri: Şirket tanıtım siteleri
- 🎯 Landing Page'ler: Marketing sayfaları (dönüşüm odaklı)
📊 Performans Karşılaştırması: Gerçek Rakamlar
Teoriden pratiğe geçelim. İki farklı mimariyle kurulmuş benzer özelliklere sahip sitelerin performans metriklerini karşılaştıralım:
⚡ Core Web Vitals Karşılaştırması
| Metrik | CSR (React) | SSR (Next.js) | İdeal |
|---|---|---|---|
| FCP (First Contentful Paint) | 2.1s | 0.8s | < 1.8s |
| LCP (Largest Contentful Paint) | 2.8s | 1.2s | < 2.5s |
| TTI (Time to Interactive) | 4.5s | 1.8s | < 3.8s |
| CLS (Cumulative Layout Shift) | 0.05 | 0.03 | < 0.1 |
| Bundle Size | 450 KB | 180 KB | < 200 KB |
● İyi | ● Orta | ● Kötü
🎯 Hibrit Yaklaşım: İki Dünyanın En İyisi
Modern framework'ler artık hibrit yaklaşım sunuyor. Yani aynı projede hem SPA hem SSR kullanabiliyoruz!
🔥 Next.js ile Hibrit Mimari
// 1. SSR sayfası - SEO önemli
// pages/products/[id].js
export async function getServerSideProps({ params }) {
const product = await fetchProduct(params.id);
return { props: { product } }; // Her istekte render
}
// 2. SSG sayfası - Static içerik
// pages/about.js
export async function getStaticProps() {
return { props: { content: 'Hakkımızda' } }; // Build time'da render
}
// 3. CSR (Client-Side Rendering) - Dashboard
// pages/dashboard.js
export default function Dashboard() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/user-data').then(res => setData(res)); // Client'ta render
}, []);
return <div>{data}</div>;
}🧩 Sayfa Bazlı Karar Verme
| Sayfa Tipi | Önerilen Yöntem | Neden? |
|---|---|---|
| Ürün Detay Sayfası | SSR | SEO + Sosyal medya paylaşım |
| Kullanıcı Dashboard | CSR | Dinamik veri + Auth gerekli |
| Blog Yazısı | SSG | Statik içerik + En hızlı |
| Haber Feed'i | ISR | Periyodik güncelleme |
CSR: Client-Side Rendering | SSR: Server-Side Rendering | SSG: Static Site Generation | ISR: Incremental Static Regeneration
🔍 Karar Verme Rehberi: 5 Kritik Soru
1️⃣ SEO Ne Kadar Önemli?
- ✅ Çok önemli (E-ticaret, blog, kurumsal) → SSR/SSG
- ❌ Önemli değil (Dashboard, admin panel) → CSR
2️⃣ İlk Yükleme Hızı mı, Navigasyon Hızı mı?
- ⚡ İlk yükleme kritik (Landing page, e-ticaret) → SSR
- 🚀 Navigasyon hızı kritik (SaaS, oyun) → CSR
3️⃣ İçerik Dinamik mi, Statik mi?
- 📝 Çoğunlukla statik (Blog, dokümantasyon) → SSG
- 🔄 Çok dinamik (Sosyal medya, borsa) → CSR
4️⃣ Bütçe ve Sunucu Maliyeti?
- 💰 Sınırlı bütçe (Startup, kişisel proje) → CSR + Serverless
- 💎 Yeterli bütçe (Kurumsal, e-ticaret) → SSR + CDN
5️⃣ Takımın Deneyimi?
- 👶 Junior takım → CSR (daha basit başlangıç)
- 👨💻 Deneyimli takım → SSR/Hibrit (optimizasyon fırsatları)
