React 19 Server Components ve Geleceğin UI Mimarisi

React Yeniden Şekilleniyor

React 19 ile birlikte artık frontend geliştirme alışkanlıklarımız kökten değişiyor. Özellikle React Server Components (RSC) ve yeni Actions mimarisi sayesinde, uygulamalarımız hem çok daha hızlı yükleniyor hem de kod tabanımız inanılmaz derecede sadeleşiyor.

Server Components (Sunucu Bileşenleri) Nedir?

Şimdiye kadar yazdığımız tüm React bileşenleri tarayıcıda (Client) çalışıyor, sayfaya JavaScript olarak iniyor ve orada render oluyordu. Bu da büyük JavaScript paket (bundle) boyutlarına yol açıyordu.

Server Components ise sadece sunucuda (veya build aşamasında) çalışır. Veritabanına doğrudan bağlanabilir ve istemciye (tarayıcıya) hiçbir JavaScript kodu göndermez; sadece oluşturulan saf HTML/UI gönderilir.

// Sunucuda çalışan bir React 19 bileşeni (async kullanabiliyoruz!)
import db from './database';

export default async function KullaniciProfili({ id }) {
  // useEffect veya fetch sarmalayıcılarına gerek yok!
  // Doğrudan veritabanı sorgusu atıyoruz
  const kullanici = await db.kullanicilar.bul(id);

  return (
    <div className="profil-karti">
      <h1>{kullanici.ad}</h1>
      <p>Kayıt: {kullanici.kayitTarihi}</p>
    </div>
  );
}

Yeni 'use' Hook'u

Eskiden bir veri çekmek için useEffect, useState yazar ve yüklenme (loading) durumlarını manuel yönetirdik. Artık use hook'u ile Promise'leri doğrudan bileşen içinde çözebiliyoruz.

import { use, Suspense } from 'react';

const havaDurumuGetir = fetch('https://api.weather.com/...').then(r => r.json());

function HavaDurumuBileseni() {
  // Promise çözülene kadar bekler (Suspense'i tetikler)
  const hava = use(havaDurumuGetir);
  
  return <div>Bugün hava {hava.derece} derece.</div>;
}

// Kullanımı
export default function Sayfa() {
  return (
    <Suspense fallback={<div>Hava durumu yükleniyor...</div>}>
      <HavaDurumuBileseni />
    </Suspense>
  );
}

Formlar ve Server Actions

React 19, form verilerini sunucuya göndermek için harika bir yenilik getirdi: Actions. Artık onSubmit içine 'e.preventDefault()' yazıp verileri manuel toplamaya son!

// Sunucu tarafı fonksiyonu (action)
async function formuKaydet(formData) {
  'use server'; // Bu fonksiyon güvenli bir sunucu API'sine dönüşür
  const isim = formData.get('isim');
  await veritabaninaYaz(isim);
}

// İstemci Bileşeni
export default function ProfilFormu() {
  return (
    // Doğrudan action prop'una sunucu fonksiyonunu verebiliyoruz
    <form action={formuKaydet}>
      <input type="text" name="isim" placeholder="Adınız" />
      <button type="submit">Kaydet</button>
    </form>
  );
}