1~
2React 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.
3~
4## Server Components Nedir?
5~
6Geleneksel 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.
7~
8### Faydalar
9~
101.  **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.
112.  **Doğrudan Backend Erişimi**: API uç noktaları oluşturmadan bileşeninizin içinde doğrudan veritabanınızı sorgulayabilirsiniz.
123.  **Otomatik Kod Bölme**: Sunucu tarafında import edilen Client components otomatik olarak kod-bölmeye tabi tutulur.
13~
14## Veri Çekme Kalıbı
15~
16RSC ile bileşenlerinizi `async` yapabilir ve veriyi doğrudan bekleyebilirsiniz.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Users</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Akış için Suspense
39~
40Veri çekme yavaş olabileceğinden, veri yüklenirken hemen bir yedek UI göstermek için bileşenlerinizi `<Suspense>` ile sarın.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Server ve Client Components'ı Birleştirme
60~
61En kafa karıştırıcı yönlerden biri, Server ve Client bileşenlerini nasıl birleştireceğinizdir.
62~
63**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.
64~
65### "Children" Kalıbı
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Count: {count}
79      {children} {/* This can be a Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* This works perfectly */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Yaygın Tuzaklar
100~
1011.  **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.
1022.  **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.
103~
104## Sonuç
105~
106React 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.
107~