2026'da React Server Components'ta Ustalaşma

React Server Components (RSC), React uygulamaları oluşturma şeklimizi köklü bir şekilde değiştirdi. Render mantığını sunucuya taşıyarak, istemciye gönderilen JavaScript paketini önemli ölçüde azaltabilir, daha hızlı yükleme süreleri ve daha iyi kullanıcı deneyimleri sağlayabiliriz. Bu makalede, 2026'da RSC'lerden yararlanmak için gelişmiş kalıpları ve en iyi uygulamaları keşfedeceğiz.

Server Components Nedir?

Geleneksel olarak, React bileşenleri tamamen istemcide (CSR) render edilir veya sunucuda HTML olarak ön-render (SSR) edilip ardından istemcide hydrate edilirdi. Server Components bileşenleri yalnızca sunucuda render etmemize olanak tanır. Kodları asla tarayıcıya gönderilmez.

Faydalar

1. Sıfır Paket Boyutu: Server Components'ta kullanılan bağımlılıklar (markdown ayrıştırıcılar veya ağır tarih kütüphaneleri gibi) sunucuda kalır.
2. Doğrudan Backend Erişimi: API uç noktaları oluşturmadan bileşeninizin içinde doğrudan veritabanınızı sorgulayabilirsiniz.
3. Otomatik Kod Bölme: Sunucu tarafında import edilen Client components otomatik olarak kod-bölmeye tabi tutulur.

Veri Çekme Kalıbı

RSC ile bileşenlerinizi async yapabilir ve veriyi doğrudan bekleyebilirsiniz.

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Akış için Suspense

Veri çekme yavaş olabileceğinden, veri yüklenirken hemen bir yedek UI göstermek için bileşenlerinizi <Suspense> ile sarın.

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>My Users</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Server ve Client Components'ı Birleştirme

En kafa karıştırıcı yönlerden biri, Server ve Client bileşenlerini nasıl birleştireceğinizdir.

Temel Kural: Server Components Client Components'ı import edebilir. Client Components Server Components'ı doğrudan import edemez. Ancak bir Server Component'i Client Component'e children olarak geçirebilirsiniz.

"Children" Kalıbı

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      Count: {count}
      {children} {/* This can be a Server Component! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* This works perfectly */}
    </ClientWrapper>
  );
}

Yaygın Tuzaklar

1. Server Components'ta Context Kullanma: Context istemci tarafı bir kavramdır. Sunucu tarafında veri paylaşmanız gerekiyorsa, props olarak geçirin veya özelleştirilmiş bir istek kapsamlı önbellek kullanın.
2. Olay İşleyicileri Ekleme: Bir Server Component'e onClick veya onChange ekleyemezsiniz. Bu mantık genel bir Client Component yaprak düğümünde yer almalıdır.

Sonuç

React Server Components sadece bir özellik değil; bir paradigma değişimidir. Sunucu ve istemci arasındaki sınırı anlayarak, hem yüksek etkileşimli hem de inanılmaz hızlı uygulamalar oluşturabilirsiniz.