React Server Components (RSC)

React Server Components, React uygulamalarında sunucu tarafında bileşenlerin render edilmesini sağlayan yeni bir özelliktir. Bu özellik, özellikle büyük ölçekli uygulamalarda performansı artırmak ve kullanıcı deneyimini iyileştirmek için tasarlanmıştır.

Temel Kavramlar

1. Sunucu Tarafında Render (Server-Side Rendering - SSR)

React Server Components, geleneksel SSR'den farklıdır. SSR'de tüm uygulama sunucuda render edilir ve istemciye gönderilir. RSC ise, sadece belirli bileşenlerin sunucuda render edilmesine olanak tanır.

2. İstemci Tarafında Render (Client-Side Rendering - CSR)

RSC, istemci tarafında render edilen bileşenlerle birlikte çalışabilir. Bu, hibrit bir yaklaşım sunar ve uygulamanın daha verimli çalışmasını sağlar.

3. Veri Çekme İşlemleri

RSC, sunucu tarafında veri çekme işlemlerini daha verimli hale getirir. Veritabanı sorguları veya API çağrıları gibi işlemler sunucuda yapılır ve sadece gerekli veriler istemciye gönderilir.

4. Paket Boyutu

RSC, istemciye gönderilen JavaScript paket boyutunu azaltır. Sunucuda render edilen bileşenler, istemci tarafında çalıştırılması gereken kod miktarını azaltır.

React Server Components Nasıl Çalışır?

React Server Components, sunucu ve istemci arasında bir protokol kullanır. Bu protokol, sunucuda render edilen bileşenlerin istemciye nasıl gönderileceğini ve istemci tarafında nasıl entegre edileceğini belirler.

Adımlar:

1. Sunucuda Render: Bileşenler sunucuda render edilir ve JSON formatında istemciye gönderilir.
2. İstemcide Entegrasyon: İstemci, sunucudan gelen JSON verisini alır ve bu veriyi kullanarak bileşenleri ekranda gösterir.
3. Etkileşim: İstemci tarafında etkileşim gerektiren bileşenler, geleneksel React bileşenleri gibi çalışır.

React Server Components Örneği

Aşağıda, React Server Components kullanarak basit bir örnek gösterilmiştir. Bu örnekte, sunucuda bir liste render edilir ve istemci tarafında gösterilir.

1. Sunucu Bileşeni (Server Component)

// ServerComponent.js
import db from "imaginary-database";

export default function ServerComponent() {
  const data = db.query("SELECT * FROM products");

  return (
    <div>
      <h1>Ürün Listesi</h1>
      <ul>
        {data.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

2. İstemci Bileşeni (Client Component)

// ClientComponent.js
"use client";

import { useState } from "react";

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Sayac: {count}</p>
      <button onClick={() => setCount(count + 1)}>Arttır</button>
    </div>
  );
}

3. Ana Uygulama

// App.js
import ServerComponent from "./ServerComponent";
import ClientComponent from "./ClientComponent";

export default function App() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

Avantajlar

• Performans: Sunucuda render edilen bileşenler, istemci tarafında daha az işlem yapılmasını sağlar.
• Verimli Veri Çekme: Veritabanı sorguları ve API çağrıları sunucuda yapılır, bu da istemci tarafında daha hızlı çalışır.
• Küçük Paket Boyutu: İstemciye gönderilen JavaScript kodu azalır, bu da uygulamanın daha hızlı yüklenmesini sağlar.
• Hibrit Yaklaşım: Sunucu ve istemci bileşenleri birlikte kullanılabilir, bu da esneklik sağlar.

Sınırlamalar

• Öğrenme Eğrisi: RSC, yeni bir konsept olduğu için öğrenme eğrisi olabilir.
• Tooling Desteği: Henüz tam olgunlaşmamış bir özellik olduğu için araç desteği sınırlı olabilir.
• Karmaşıklık: Büyük uygulamalarda sunucu ve istemci bileşenlerini yönetmek karmaşık olabilir.

Sonuç

React Server Components, modern React uygulamalarında performans ve verimlilik açısından önemli bir adımdır. Sunucu tarafında render edilen bileşenler, istemci tarafında daha az işlem yapılmasını sağlar ve uygulamanın daha hızlı çalışmasına yardımcı olur. Ancak, bu özelliği kullanırken dikkatli olmak ve projenin ihtiyaçlarını iyi analiz etmek önemlidir.

Umarım bu rehber, React Server Components hakkında daha iyi bir anlayış kazanmanıza yardımcı olur! Herhangi bir sorunuz varsa, bana sormaktan çekinmeyin. 😊