React Server Components

Türkçe karşılığı: sunucu bileşenleri
Okunuşu: riekt sörvır kımpounınts

Günlük kullanımda çoğunlukla İngilizcesi tercih edilir.

Güncellendi 6 Ekim 20262 dk okuma

Kısaca

React Server Components, yalnızca sunucuda ya da build sırasında çalışan React bileşenleridir; veriyi doğrudan okuyabilir ve tarayıcıya JavaScript göndermezler.

React Server Components nedir?

Klasik React'te her bileşenin kodu, yalnızca metin gösterse bile tarayıcıya indirilir ve orada çalışır. Aralık 2024'te React 19 ile kararlı hâle gelen React Server Components, ayrı bir ortamda önceden render edilen ikinci bir bileşen türü ekler: build sırasında ya da her istekte sunucuda. Kodları tarayıcıya hiç ulaşmaz; bu yüzden kullandıkları Markdown ayrıştırıcısı gibi büyük bir kütüphane bundle'a hiçbir şey eklemez. Ayrıca bir API çağırmak yerine bir veritabanını ya da dosyayı doğrudan okuyan async fonksiyonlar olabilirler.

Beğen butonu gibi state, effect ya da olay işleyicisi gerektiren bileşenler Client Component olarak kalır. "use client" direktifiyle başlayan bir dosya bu sınırı işaretler: o dosya ve import ettiği her şey tarayıcıya gönderilir. Server Component'ler Client Component'leri render edebilir ve onlara metin, sayı ve düz nesneler gibi serileştirilebilir props'lar ya da children olarak önceden render edilmiş öğeler geçebilir. Sunucu sonucunu RSC payload olarak gönderir: tarayıcıdaki React'in sayfaya işlediği, akış hâlinde gönderilebilen bir bileşen ağacı tarifi. Böylece bir gezinme, istemcideki state'i kaybetmeden sunucuda render edilen kısımları yenileyebilir.

İlişkili "use server" direktifi, 2024'e kadar Server Actions denen Server Functions'ı işaretler: sunucuda çalışan ama istemci kodunun, örneğin bir formu kaydetmek için, sıradan bir fonksiyon gibi çağırabildiği fonksiyonlar. Her biri aslında herkese açık bir HTTP endpoint'idir; bu yüzden kimin çağırdığını kontrol etmeli ve girdisini doğrulamalıdır. Server Components, onları destekleyen bir framework ya da bundler gerektirir; Next.js App Router bunlardan biridir, React Router, Waku ve başkaları da destek ekledi. Alttaki bundler API'leri ise React'in minor sürümleri arasında hâlâ değişebilir.

React Server Components sık sık sunucu tarafı render (SSR) ile karıştırılır. SSR ilk sayfa yüklemesi için bileşenleri HTML'e dönüştürür; ardından tarayıcı her bileşenin kodunu indirir ve sayfayı etkileşimli hâle getirmek için hydrate eder. Server Component'ler ise hiçbir zaman hydrate edilmez, kodlarını hiç göndermez ve HTML üretmek zorunda bile değildir. İkisi birlikte çalışır: framework'ler hızlı bir ilk görünüm için Server Component çıktısını genellikle SSR ile HTML'e dönüştürür.

Önemli noktalar

Server Component'ler sunucuda ya da build sırasında çalışır; kodları tarayıcıya hiç ulaşmaz.
async olabilir ve veritabanlarını ya da dosyaları doğrudan okuyabilirler.
"use client" ile işaretlenen Client Component'ler state'i ve etkileşimi üstlenir.
"use server", Server Component'leri değil Server Functions'ı işaretler.
SSR'ı tamamlarlar: SSR HTML üretir, Server Component'ler tarayıcıya gönderilen JavaScript'i azaltır.

Örnek

Veri okuyan ve bir Client Component render eden bir Server Componentjsx

// ProductPage.jsx: a Server Component, the default; its code never reaches the browser
import { db } from "./db";
import AddToCart from "./AddToCart"; // a Client Component: AddToCart.jsx starts with "use client"

export default async function ProductPage({ id }) {
  const product = await db.products.find(id); // read the database directly, no API needed
  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCart productId={id} />
    </main>
  );
}

Sık sorulan sorular

React Server Components ile SSR arasındaki fark nedir?

SSR bileşenleri sunucuda HTML'e dönüştürür, ama kodları yine de tarayıcıya gönderilir ve hydrate edilir. Server Component'ler yalnızca sunucuda çalışır, hiç hydrate edilmez ve kod göndermez; bu da JavaScript bundle'ını küçültür. Framework'ler çoğu zaman ikisini birlikte kullanır.

Server Component'ler useState gibi hook'ları kullanabilir mi?

Hayır. State, effect'ler ve olay işleyicileri tarayıcıya ihtiyaç duyar; bu yüzden Client Component'lerde yer alır. Buna karşılık Server Component'ler async olabilir ve veriyi doğrudan bekleyebilir.

React Server Components için Next.js gerekli mi?

Onları uygulayan bir framework ya da bundler gerekir, çünkü Server Component'ler build ve sunucu entegrasyonuna dayanır. İlk destekleyen Next.js App Router'dı; React Router, Waku ve başkaları da sonradan destek ekledi.

İlgili sayfalar

Kaynaklar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin