React 19, modern web uygulamalarında performans ve kullanıcı deneyimini kökten değiştiren Server Components ve Client Components ayrımını getirdi. Peki, hangi durumda hangi bileşen türünü kullanmalısınız? Bu yazıda, iki yaklaşım arasındaki temel farkları, avantajları ve karar verme kriterlerini soru-cevap formatında ele alıyoruz.
Server Component Nedir?
Server Components, yalnızca sunucu tarafında çalışan ve istemciye HTML çıktısı gönderen React bileşenleridir. Bu bileşenlerde hiçbir istemci tarafı JavaScript'i bulunmaz; React state, effect, event handler gibi özellikler kullanılamaz. Server Components, veri tabanına veya dosya sistemine doğrudan erişerek sayfanın statik veya dinamik kısımlarını sunucuda oluşturur. Örneğin, bir blog yazısının içeriğini veritabanından çekip HTML olarak döndürmek idealdir.
Client Component Nedir?
Client Components, istemci tarafında çalışan, React state, useEffect, useState, event handler gibi interaktif özellikler içerebilen bileşenlerdir. Bunlar, tarayıcıda JavaScript olarak çalışır ve kullanıcı etkileşimlerine yanıt verir. Örneğin, bir butona tıklama, form girişi veya animasyon gibi durumlar Client Components gerektirir.
Server Components vs Client Components: Karşılaştırma Tablosu
| Özellik | Server Component | Client Component |
|---|---|---|
| Çalışma Ortamı | Sunucu (Node.js) | Tarayıcı |
| JavaScript Boyutu | İstemciye gönderilmez | İstemciye indirilir |
| State/Efekt | Kullanılamaz | Kullanılabilir |
| Event Handler | Kullanılamaz | Kullanılabilir |
| Veri Erişimi | Doğrudan (DB, API) | API üzerinden (fetch) |
| Performans | Daha hızlı ilk yükleme | Daha fazla JS yükü |
| SEO | Tam HTML çıktısı | CSR'de daha zayıf |
Hangi Durumda Server Components Kullanmalısınız?
Server Components şu senaryolarda öne çıkar:
- Statik içerik: Blog yazıları, ürün açıklamaları gibi sık değişmeyen veriler.
- Veri tabanı sorguları: Sunucuda doğrudan veri çekme, API çağrısı yapmaya kıyasla daha hızlıdır.
- Bağımlılık ve kütüphane yükü: İstemciye gönderilmesi gereksiz olan büyük kütüphaneler (ör. işaretleme işlemcileri) Server Components içinde kalabilir.
- SEO kritik sayfalar: Arama motorlarının tam HTML görmesi gereken durumlar.
Örneğin, Next.js'te SSG, SSR ve ISR Karşılaştırması yazımızda bahsedilen statik sayfa üretimi, Server Components ile doğal olarak entegre olur.
Hangi Durumda Client Components Kullanmalısınız?
Client Components aşağıdaki durumlar için vazgeçilmezdir:
- Kullanıcı etkileşimi: Buton tıklamaları, form gönderimleri, menü açılmaları.
- State yönetimi: Karmaşık yerel durumlar (örnek: Redux Toolkit vs Zustand yazımızda karşılaştırılan kütüphanelerle yönetilen durumlar).
- Gerçek zamanlı güncellemeler: WebSocket, polling, animasyon.
- Tarayıcı API'leri: localStorage, navigator, canvas gibi.
Eğer bileşeninizde herhangi bir interaktiflik varsa, "use client" direktifi ile Client Component olarak işaretlemeniz gerekir.
Karma Kullanım: En İyi Pratikler
React 19 projelerinde çoğu sayfa hem Server hem Client Components içerir. Önerilen yaklaşım:
- Mümkün olduğunca üst düzey bileşenleri Server Component yapın.
- İnteraktif kısımları küçük Client Component'lere ayırın.
- Veri çekme işlemlerini Server Component'te yapıp, sonuçları prop olarak Client Component'e geçirin.
- Client Component'lerin içine Server Component yerleştirmeyin (ancak children prop olarak alabilir).
Bu yapı, Micro Frontends ile Modüler Web Uygulamaları yazımızdaki modüler yaklaşımla da uyumludur.
Sık Yapılan Hatalar
Server Components ile ilgili en yaygın hatalar:
- Event handler kullanmak: onClick gibi özellikler Client Component gerektirir; Server Component'te kullanılamaz.
- State kullanmak: useState, useReducer yalnızca Client Component'te çalışır.
- useEffect kullanmak: Yan etkiler Client Component'e aittir.
- Tarayıcı API'lerine erişmek: window, document gibi nesneler sunucuda tanımlı değildir.
Bu hataları önlemek için bileşenin başına 'use client' eklemeyi unutmayın. Ayrıca, Client Component içinde Server Component kullanmak istiyorsanız, onu children prop olarak geçirin.
Performans ve SEO Üzerindeki Etkileri
Server Components sayesinde istemciye gönderilen JavaScript miktarı önemli ölçüde azalır. Bu, özellikle mobil cihazlarda daha hızlı ilk yükleme ve daha düşük veri kullanımı anlamına gelir. SEO açısından, sunucuda oluşturulan tam HTML arama motorları tarafından kolayca indekslenir. Ancak, interaktif özelliklerin tamamı Client Components ile sağlandığı için ikinci bir yükleme adımı gerekebilir. Bu dengeyi iyi kurmak, kullanıcı deneyimini doğrudan etkiler.
Sonuç ve Öneriler
React 19 ile Server Components ve Client Components ayrımı, doğru kullanıldığında hem geliştirme sürecini hem de uygulama performansını iyileştirir. Temel kural: İnteraktif olmayan her şeyi Server Component, interaktif olan her şeyi Client Component yapın. Projenizde Next.js gibi bir framework kullanıyorsanız, bu ayrımı otomatik yönettiğini unutmayın. Daha derinlemesine bilgi için Next.js render stratejileri yazımızı da inceleyebilirsiniz.
Sık Sorulan Sorular
Server Component'te event handler (onClick) kullanabilir miyim?
Hayır, Server Component'ler istemci tarafında çalışmadığı için event handler'lar (onClick, onChange vb.) kullanılamaz. Etkileşim gerekiyorsa bileşeni 'use client' ile Client Component olarak işaretlemeniz gerekir.
Client Component içinde Server Component kullanmak mümkün mü?
Evet, ancak doğrudan import ederek kullanılamaz. Client Component, children prop olarak Server Component alabilir. Bu sayede Server Component'lerin avantajlarından yararlanırken Client Component'in interaktif özelliklerini koruyabilirsiniz.
Server Components ile veri çekme nasıl yapılır?
Server Component'lerde doğrudan async/await kullanarak veritabanına veya API'ye erişebilirsiniz. Herhangi bir useEffect veya fetch gerekmez. Örneğin, 'const data = await db.query(...)' yazabilirsiniz.
Tüm sayfamı Server Component yapabilir miyim?
Sayfanız tamamen statikse ve hiç kullanıcı etkileşimi içermiyorsa evet. Ancak çoğu web uygulaması en azından bir buton veya form içerir; bu durumda ilgili kısımları Client Component olarak ayırmalısınız.
