React Server Components (RSC) Nedir?

React ekosistemi, sürekli evrilen ve web geliştirmeye yenilikçi yaklaşımlar getiren bir yapıya sahip. Bu yeniliklerin en önemlilerinden biri de React Server Components (RSC), yani Sunucu Bileşenleri. İlk olarak 2020’de duyurulan ve Next.js App Router ile popülerleşen bu konsept, React uygulamalarının mimarisini ve performansını temelden değiştirme potansiyeline sahip.

React Server Components (RSC) Tam Olarak Nedir?

Adından da anlaşılacağı gibi, Sunucu Bileşenleri sadece sunucuda çalışan React bileşenleridir. Geleneksel React bileşenleri (artık onlara İstemci Bileşenleri diyebiliriz) tarayıcıya indirilen JavaScript paketinin bir parçasıdır ve tarayıcıda render edilir. RSC’ler ise render işlemini sunucuda tamamlar ve tarayıcıya herhangi bir JavaScript kodu göndermezler. Tarayıcıya gönderilen şey, render edilmiş HTML benzeri bir yapıdır.

Bu, iki temel avantaj sağlar:

1. Sıfır Paket Boyutu (Zero Bundle-Size): RSC’ler, istemciye gönderilen JavaScript paket boyutuna eklenmez. Bu, özellikle statik içerik gösteren veya büyük kütüphaneler kullanan bileşenler için önemlidir. Örneğin, bir markdown dosyasını parse edip HTML’e çeviren bir bileşen, normalde marked gibi büyük bir kütüphaneyi istemciye gönderirdi. RSC ile bu işlem sunucuda yapılır ve tarayıcıya sadece sonuç HTML gönderilir. Bu da sayfanın interaktif hale gelme süresini (Time to Interactive - TTI) ciddi şekilde iyileştirir.

2. Doğrudan Veri Kaynağı Erişimi: RSC’ler sunucuda çalıştığı için, veritabanları, dosya sistemleri veya dahili API’ler gibi veri kaynaklarına doğrudan ve güvenli bir şekilde erişebilirler. Artık istemci tarafında useEffect içinde bir fetch çağrısı yapıp yükleme durumlarını yönetmek yerine, veriyi doğrudan async/await ile çekip bileşeni render edebilirsiniz.

// Bu bir Sunucu Bileşenidir (Next.js App Router'da varsayılan)
async function Post({ id }) {
  // Doğrudan veritabanı veya API'ye erişim
  const postData = await db.posts.find(id);
 
  return (
    <article>
      <h1>{postData.title}</h1>
      <p>{postData.content}</p>
    </article>
  );
}

İstemci Bileşenleri vs. Sunucu Bileşenleri

Peki bu, istemci bileşenlerinin sonu mu demek? Kesinlikle hayır. İnteraktivite gerektiren her şey (state yönetimi (useState), olay dinleyicileri (onClick), tarayıcı API’leri ve useEffect gibi hook’lar) hala İstemci Bileşenleri gerektirir. Modern bir React uygulamasında bu iki tür bileşen bir arada çalışır.

• Sunucu Bileşenleri (Varsayılan): Veri çekme, statik içerik gösterme gibi interaktif olmayan görevler için kullanılır.
• İstemci Bileşenleri ('use client' direktifi ile): Buton tıklamaları, formlar, animasyonlar gibi kullanıcı etkileşimi ve state gerektiren durumlar için kullanılır.

İyi bir mimari, mümkün olduğunca çok işi Sunucu Bileşenlerine yaptırıp, interaktiviteyi küçük ve izole İstemci Bileşenlerine bırakmaktır. Örneğin, bir ürün detay sayfası düşünün. Ürün bilgileri, açıklaması ve resimleri bir Sunucu Bileşeninde render edilebilirken, “Sepete Ekle” butonu kendi state’ini yöneten bir İstemci Bileşeni olabilir.

React Server Components, SSR (Server-Side Rendering) veya SSG (Static Site Generation) gibi mevcut konseptlerin bir alternatifi değil, tamamlayıcısıdır. Web uygulamalarını daha hızlı, daha hafif ve geliştirilmesi daha kolay hale getiren bir paradigma değişimidir. Bu yeni mimariyi anlamak, geleceğin React uygulamalarını inşa etmek için kritik öneme sahiptir.