React 19 ve Server Components: Tarayıcı mı Sunucu mu Render Ediyor?

Tarayıcı mı Sunucu mu Render Ediyor?

React 19, framework’ün tarihindeki en büyük mimari dönüşümlerden birini başlattı.
Server Components (RSC) artık resmi olarak stabil sürümde!
Artık bazı bileşenler hiç JavaScript bundle’ına dahil olmadan, doğrudan sunucuda render ediliyor.

Kulağa sihir gibi geliyor, değil mi? ✨
Ama aslında bu, modern web’in doğal evrimi. Gel, adım adım ne olduğunu anlayalım.

Klasik React Modeli (Client Components)

function Hello() {
  return <h1>Hello Client!</h1>
}

⚠️ Sorun: Büyük projelerde JS bundle’ı devasa boyutlara ulaşır ve sayfa yüklenme süresi uzar.

Yeni Model: Server Components (RSC)

// Server Component
export default async function Posts() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json())
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  )
}

Server Component’in Özellikleri

Client ve Server Component’lerin Birlikte Kullanımı

// 📁 app/page.jsx
import Posts from './Posts.server'
import LikeButton from './LikeButton.client'

export default function Page() {
  return (
    <main>
      <Posts />
      <LikeButton />
    </main>
  )
}

• Posts.server → Server Component (veri çeker, HTML döner).
• LikeButton.client → Client Component (etkileşim içerir).

RSC Nasıl Çalışıyor?

Bu yaklaşım sayesinde:

• JS bundle boyutu küçülür.
• Tarayıcıda gereksiz render azalır.
• SSR + SPA performans dengesi kurulur.

Örnek: Gerçek Hayat Kullanımı (Next.js 15)

// app/posts/page.jsx
export default async function Page() {
  const posts = await getPosts()
  return (
    <>
      <h1>Son Gönderiler</h1>
      <ul>
        {posts.map(p => <li key={p.id}>{p.title}</li>)}
      </ul>
    </>
  )
}

'use client'
export function LikeButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>❤️ {count}</button>
}

Sonuç: sayfa 3 KB JS ile yüklenir, çünkü sadece LikeButton client tarafında çalışıyor.

Artılar ve Eksiler

✅ Avantajlar

• JS bundle boyutu ciddi oranda azalır.
• Server-side veri işlemleri daha hızlı.
• Güvenlik artar (API anahtarları client’a gitmez).
• SEO mükemmel hale gelir (HTML tamamen hazır).

Dikkat Edilmesi Gerekenler

• useEffect, useState gibi hook’lar server bileşenlerde kullanılamaz.
• Client bileşenleriyle veri paylaşımı props üzerinden yapılmalı.
• SSR cache yönetimi önem kazanır.

Server Components ile Veri Akışı

export default async function ProductList() {
  const products = await fetch('/api/products').then(r => r.json())
  return <div>{products.map(p => <Product key={p.id} {...p} />)}</div>
}

Bu yapı, React Query veya SWR gibi kütüphanelerin yükünü azaltır.

RSC’nin Performans Etkisi

• Ortalama %30 daha hızlı ilk render (TTFB).
• %40 daha küçük bundle boyutu.
• Hydration süresi kısaldığı için CPU kullanımı azalır.

React 19 ile Gelen Ek Yenilikler

• use() hook → async veriyi component içinde doğrudan await etme.
• Action API → form submit’leri server component üzerinden yönlendirme.
• Suspense artık fetch işlemleriyle tam entegre.

export default function Page() {
  const data = use(fetchData()) // doğrudan await!
  return <div>{data.title}</div>
}

Sonuç

Kısaca:

• Server Components = Daha az JS, daha fazla hız.
• Client Components = Etkileşim ve animasyon.
• İkisini birlikte kullanmak = Modern web’in geleceği.