React Server Components

React Server Components Nedir?

React 18 ve Next.js 13+ ile hayatımıza giren React Server Components (RSC), component'lerin sunucu tarafında render edilmesini ve istemciye sadece HTML olarak gönderilmesini sağlar. Bu, JavaScript bundle boyutunu dramatik şekilde azaltır.

Client vs Server Components

Temel fark şu: Server Components hiçbir zaman istemciye JavaScript göndermez. Interaktivite gerektiren her şey Client Component olmalıdır:

// server-component.tsx (varsayılan olarak server)
async function ProductList() {
  const products = await db.query('SELECT * FROM products');
  return (
    <ul>
      {products.map(p => <ProductCard key={p.id} product={p} />)}
    </ul>
  );
}

// client-component.tsx
"use client";
export function AddToCart({ productId }) {
  const [added, setAdded] = useState(false);
  return (
    <button onClick={() => setAdded(true)}>
      {added ? 'Eklendi ✓' : 'Sepete Ekle'}
    </button>
  );
}

Ne Zaman Hangisini Kullanmalısınız?

Server Component kullanın: Veri fetch, DB sorguları, ağır hesaplamalar, SEO gerektiren içerik
Client Component kullanın: onClick, useState, useEffect, browser API'leri, form interaction

Performans Kazanımları

Gerçek dünyadan bir örnek: E-ticaret sitemizi RSC'ye geçirdiğimizde JavaScript bundle boyutu %43 azaldı ve First Contentful Paint 2.1s'den 0.8s'ye düştü.

Sonuç

RSC, React ekosisteminin en önemli evrimlerinden biri. Doğru kullanıldığında müthiş performans kazanımları sağlıyor. Yanlış kullanıldığında ise debugging kabusu olabiliyor. Kuralı basit: sunucu tarafında ne işin varsa orada çözümlüyorsun, interaktivite için client'a geçiyorsun.

React Server Components: Oyunun Kurallarını Değiştiren Özellik