Server Components (React) Nedir?

SSR ile aynı şey değil

İki kavram sık karıştırılır, çünkü ikisi de "sunucuda render" içerir. SSR, bileşen ağacının ilk HTML'ini sunucuda üretir; ardından tarayıcı aynı bileşenlerin tamamının kodunu indirip hydrate eder. Server Components ise başka bir soruyu cevaplar: hangi bileşenlerin kodu tarayıcıya hiç gitmeyecek? Bir sunucu bileşeni çalışır, sonucunu React Server Component Payload (RSC Payload) adı verilen sıkıştırılmış bir formatta üretir ve iş biter; istemcide yeniden çalışmaz, hydrate edilmez.

React dokümantasyonuna göre sunucu bileşenleri iki şekilde çalışabilir: derleme sırasında (statik içerik için) veya her istekte bir web sunucusunda (dinamik içerik için). Next.js App Router'da ilk yüklemede sunucu bileşenleri RSC Payload'a dönüştürülür, istemci bileşenleri ile bu payload birlikte HTML'i üretir; tarayıcıda HTML hemen gösterilir, payload iki ağacı uzlaştırır, JavaScript ise yalnızca istemci bileşenlerini hydrate eder.

Sunucu ile istemci arasındaki sınır

// app/urun/[id]/page.tsx  (sunucu bileşeni, varsayılan)
import { getUrun } from "@/lib/db";
import FavoriButonu from "./favori-butonu";

export default async function Sayfa({ params }) {
  const { id } = await params;
  const urun = await getUrun(id); // doğrudan veritabanı
  return (
    <main>
      <h1>{urun.ad}</h1>
      <FavoriButonu urunId={urun.id} />
    </main>
  );
}

// app/urun/[id]/favori-butonu.tsx
"use client";
import { useState } from "react";
export default function FavoriButonu({ urunId }) { /* ... */ }

Sunucu bileşenleri için bir yönerge yoktur; Next.js App Router'da sayfalar ve layout'lar varsayılan olarak sunucu bileşenidir. "use server" yönergesi sunucu bileşenini değil, istemciden çağrılabilen Server Function'ları işaretler. "use client" ise bir sınır çizer: bu satırla başlayan dosya ve onun içe aktardığı her şey istemci paketine girer.

İstemci bileşeni (client component) nedir?

İstemci bileşeni, tarayıcıda çalışan klasik React bileşenidir: useState, useEffect, onClick gibi olay işleyicileri ve localStorage gibi tarayıcı API'lerini kullanabilir. Adına rağmen yalnızca istemcide çalışmaz; Next.js'te ilk yüklemede HTML'i sunucuda da üretilir, sonra hydrate edilir. Sunucu bileşenleri istemci bileşenine children olarak geçirilebilir ve bu durumda sunucuda kalır. Sunucudan istemci bileşenine giden prop'lar ise React'in serileştirebileceği değerler olmalıdır; sıradan bir fonksiyon geçirilemez.

Ne kazandırır?

• Daha az JavaScript: Markdown ayrıştırıcı veya sözdizimi vurgulayıcı gibi yalnızca HTML üreten ağır kütüphaneler sunucuda kalır. Next.js sunucu bileşenlerini ayrıca otomatik olarak parçalara böler.
• Veriye yakınlık: Bileşen, ara bir API katmanı yazmadan veritabanını sorgulayabilir; istemci tarafındaki istek şelaleleri azalır.
• Gizli bilgilerin sunucuda kalması: API anahtarları ve token'lar tarayıcıya hiç gönderilmez; bu da gizli bilgi yönetimini kolaylaştırır.
• Akış (streaming): Suspense sınırlarıyla hazır bölümler hemen gönderilir, yavaş veri bekleyen kısımlar geldikçe eklenir.

Sık yapılan hatalar

• Sınırı fazla yukarı çizmek: Kök layout'a "use client" eklemek, altındaki her şeyi istemci paketine taşır ve kazancı sıfırlar. Yönerge, etkileşim gereken en küçük bileşene eklenmelidir.
• Sunucu kodunu yanlışlıkla istemciye almak: Ortak modüller iki tarafta da kullanılabilir. server-only paketi, sunucuya özel bir dosyanın istemci bileşeninden içe aktarılmasını derleme hatasına çevirir. Next.js ayrıca yalnızca NEXT_PUBLIC_ önekli ortam değişkenlerini istemci paketine koyar.
• Context sağlayıcılarını en üste koymak: React context sunucu bileşenlerinde çalışmaz; sağlayıcı bir istemci bileşeni olmalı ve ağaçta mümkün olduğunca aşağıda yer almalıdır.
• Hydration'ın tamamen bittiğini sanmak: İstemci bileşenleri hâlâ hydrate edilir; RSC hydration'ın kapsamını daraltır, ortadan kaldırmaz.

Destek durumu

React Server Components, React 19 ile kararlı hâle geldi. Ancak React dokümantasyonu, bu özelliği bir bundler veya framework içinde uygulamak için kullanılan alt seviye API'lerin semver'e uymadığını ve React 19.x sürümleri arasında değişebileceğini belirtir. Bu yüzden RSC pratikte doğrudan değil, bir framework üzerinden kullanılır; en yaygın uygulaması, sunucu bileşenlerini varsayılan kabul eden Next.js App Router'dır.