React Server Components ile %40 Daha Hızlı Sayfa: Gerçek Ölçümler ve Pratik Rehber

React Server Components Nedir?

RSC, React''te sunucuda render edilen ve çıktısı kullanıcıya RSC payload olarak gönderilen yeni bir bileşen türüdür. Klasik React Server-Side Rendering''den farkı: RSC''ler istemciye hiç gönderilmez — sadece render sonucu gönderilir. Client Component''lar ise her zaman gibi istemcide çalışır ama "use client" direktifi ile açıkça işaretlenir.

Server vs Client Component Karar Matrisi

Kural: Client Component Ağacın En Yaprağına Koy

"use client" bir bileşende ilan edildiğinde çocuk bileşenleri de client bağlamına girer. Doğru yapı:

• Üst seviye layout, page: Server Component
• Veri getirme: Server Component
• Sadece etkileşimli kısım (button, form field): Client Component

Yanlış: tüm page.tsx''i "use client" yapmak — RSC avantajı sıfıra düşer.

Veri Getirme: Async Server Component

// app/urunler/page.tsx (Server)
async function Urunler() {
  const urunler = await db.urunler.findMany();
  return (
    <div>
      {urunler.map(u => <Urun key={u.id} veri={u} />)}
    </div>
  );
}

useEffect + fetch patternini geri planda bıraktık. Daha az kod, daha az bundle, daha hızlı LCP.

Caching Stratejisi (Next.js 15+)

• Static: Build''de üretilip CDN''e atılır (varsayılan)
• Dynamic: Her istekte sunucuda render edilir
• ISR (Incremental Static Regeneration): Belirli süre sonra yeniden üretilir
• PPR (Partial Prerendering, deneysel): Statik + dinamik karışık

// ISR örneği
export const revalidate = 600; // 10 dk

// İstekte dinamik veri
import {cookies} from ''next/headers'';
const c = cookies();

Gerçek Ölçüm: E-Ticaret Vakası

Next.js 12 (Pages Router) → Next.js 15 (App Router + RSC) migrasyonu sonrası:

Server Actions: Form + Mutasyon

// app/iletisim/page.tsx
async function gonder(formData: FormData) {
  ''use server'';
  await db.mesajlar.create({
    ad: formData.get(''ad''),
    mesaj: formData.get(''mesaj''),
  });
  revalidatePath(''/iletisim/tesekkur'');
}

export default function Form() {
  return <form action={gonder}>...</form>;
}

API route yazmadan form backend''i. JS yoksa bile çalışır (progressive enhancement).

Streaming ve Suspense

<Suspense fallback={<Skeleton />}>
  <SlowComponent />
</Suspense>

Sayfanın hızlı kısımları önce gönderilir, yavaş kısımlar akar. Algılanan hız büyük kazanç.

Migrasyon Stratejisi

1. Next.js''i 13.4+''a yükseltin (App Router production ready)
2. Pages ve App Router yan yana çalışabilir — sayfa sayfa geçiş
3. Veri getirme mantığını server component''lara taşı
4. Auth, cart gibi etkileşimli kısımlar "use client" + provider ile çevril
5. Metadata API ile SEO yeniden yapılandır
6. Caching stratejisini sayfa tipi bazlı belirle (ISR, static, dynamic)

Yaygın Tuzaklar

1. Server Component''ta useState kullanmaya çalışmak (hata verir)
2. Tüm page.tsx''i "use client" yapıp RSC''yi devre dışı bırakmak
3. Third-party UI kütüphanelerinin hâlâ client-only olması (MUI, Chakra)
4. Cookie okumak için async server component değil, useEffect kullanmak
5. Aşırı dynamic rendering — cache miss her istekte
6. Secret''ları client component''a prop olarak geçirmek (ciddi güvenlik açığı)

RSC Dışında Kim Yapar?

• Remix: loader/action pattern, RSC değil ama benzer felsefe
• SvelteKit: load + server only kodu tek dosyada ayırt edebiliyor
• Nuxt 3: useAsyncData + server routes
• SolidStart: RSC benzeri sunucu modu var

Sıkça Sorulan Sorular

RSC production''da güvenli mi?

Next.js 13.4+ (Haziran 2023) ve sonrası stabil. 2026''da binlerce kurumsal projede production''da.

SEO''ya etkisi?

Pozitif. Sunucuda render edildiği için Googlebot içeriği hemen görür. SSR''dan daha hafif JS ile.

useEffect''i tamamen bırakabilir miyim?

Hayır — browser API''leri (scroll, resize, localStorage) için hâlâ gerekli. Ama veri fetch için çoğu yerde bıraktık.

Kütüphanem "use client" gerektiriyor, ne yapayım?

Küçük bir wrapper bileşen oluşturup "use client" deyin ve içinde kütüphaneyi import edin. Ana ağacı bozmadan kullanırsınız.

Sonraki Adım

Next.js App Router + RSC migrasyonu için teknik görüşme. İlgili: Next.js vs WordPress, INP Metriği.