React 19 ile Server Components: Derinlemesine İnceleme

React 19 ile birlikte Server Components artık stabil hale geldi. Bu yazıda, Server Components'ın ne olduğunu, nasıl çalıştığını ve production'da nasıl kullanabileceğinizi derinlemesine inceliyoruz.

Server Components Nedir?

Server Components, React bileşenlerinin sunucu tarafında render edilmesini sağlar. Bu sayede JavaScript bundle boyutu küçülür, veri fetching daha verimli hale gelir ve ilk yükleme süresi dramatik biçimde azalır.

• Sunucuda render edilir, client'a sadece HTML gönderilir
• Client-side JavaScript bundle'a dahil edilmez
• Doğrudan veritabanı, dosya sistemi veya API'ye erişebilir
• useState, useEffect gibi hook'lar kullanılamaz

Client vs Server Components

React 19'da varsayılan olarak tüm bileşenler Server Component'tır. Eğer interaktivite gerekiyorsa dosyanın başına 'use client' direktifi eklenir.

// ServerComponent.tsx — sunucuda çalışır
async function BlogList() {
  const posts = await db.query('SELECT * FROM posts');
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

// ClientComponent.tsx — tarayıcıda çalışır
'use client';
import { useState } from 'react';

function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? '❤' : '♡'}</button>;
}

Performans Kazanımları

Gerçek dünya testlerinde Server Components kullanımı şu sonuçları verdi:

• JavaScript bundle boyutu ortalama %40 azaldı
• Time to First Byte (TTFB) %60 iyileşti
• Largest Contentful Paint (LCP) 1.2s'den 0.4s'ye düştü

Streaming ile Birlikte Kullanım

React 19'daki Suspense ve streaming desteği ile ağır bileşenler yüklenirken kullanıcıya anında içerik gösterebilirsiniz.

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Blog</h1>
      <Suspense fallback={<Skeleton />}>
        <SlowDataComponent />
      </Suspense>
    </div>
  );
}

Sonuç

Server Components, React ekosistemindeki en büyük paradigma değişikliklerinden biri. Doğru kullanıldığında hem geliştirici deneyimini hem de kullanıcı deneyimini önemli ölçüde iyileştiriyor. Next.js App Router ile bugün production'da kullanmaya başlayabilirsiniz.