React Server Components: Paradigma Değişimi
React Server Components (RSC), React ekosisteminde son yılların en büyük mimari değişimidir. Bileşenlerin sunucu tarafında render edilmesini sağlayarak client'a gönderilen JavaScript miktarını dramatik şekilde azaltır.
Server Component vs Client Component
React'te artık iki tür bileşen var:
Server Components (varsayılan):
- Sunucuda çalışır, client'a JavaScript göndermez
- Veritabanına, dosya sistemine ve API'lara doğrudan erişebilir
- async/await kullanabilir
- useState, useEffect gibi hook'ları kullanamazlar
- Event handler'ları (onClick, onChange) ekleyemezler
Client Components ("use client" ile işaretlenir):
- Tarayıcıda çalışır, interaktivite sağlar
- useState, useEffect ve diğer hook'ları kullanabilir
- Event handler'ları ekleyebilir
- DOM API'larına erişebilir
Ne Zaman Server Component Kullanmalı?
- Veri çekme (fetch) yapan bileşenler — API çağrısı sunucuda yapılır, daha hızlı
- Statik içerik gösteren bileşenler — metin, görseller, listeler
- Büyük kütüphanelere bağımlı hesaplamalar — kütüphane client bundle'a eklenmez
- Hassas verilere erişen bileşenler — API key'ler sunucuda kalır
Ne Zaman Client Component Kullanmalı?
- Kullanıcı etkileşimi gerektiren bileşenler — formlar, butonlar, modallar
- Tarayıcı API'larına ihtiyaç duyan bileşenler — localStorage, geolocation
- State yönetimi gereken durumlar — useState, useReducer
- Lifecycle effect'leri — useEffect ile side effect yönetimi
- Üçüncü parti kütüphaneler — çoğu UI kütüphanesi client-only
Composition Pattern: İkisini Birlikte Kullanmak
RSC'nin gerçek gücü doğru composition ile ortaya çıkar:
- Server Component'ler, Client Component'leri children olarak alabilir
- Veriyi sunucuda çekip, interaktif client bileşenlerine prop olarak geçebilirsiniz
- Bu pattern ile hem performans hem interaktivite kazanırsınız
Yaygın hata: "use client" direktifini üst seviye bileşenlere koymak. Bu durumda altındaki tüm bileşenler de client component olur ve RSC'nin avantajı kaybolur.
Doğru yaklaşım: "use client" sınırını mümkün olduğunca aşağıya itin. Sadece gerçekten interaktivite gereken bileşenleri client olarak işaretleyin.
Veri Çekme Stratejileri
Server Components ile veri çekme çok daha temiz:
- Doğrudan async/await ile veri çekin — useEffect + useState karmaşasına gerek yok
- Veritabanı sorgularını doğrudan component içinde çalıştırın
- Paralel veri çekme — birden fazla bağımsız veri kaynağını aynı anda sorgulayın
- Streaming — sayfanın hazır olan kısımlarını hemen gösterin, geri kalanı yüklenirken loading gösterin
Performans Etkileri
RSC'nin performansa etkisi ölçülebilir şekilde büyüktür:
- JavaScript bundle boyutu: %30-60 azalma — server component'ler bundle'a dahil edilmez
- Time to Interactive (TTI): Belirgin iyileşme — daha az JS parse edilmesi gerekir
- First Contentful Paint (FCP): Sunucuda render edilmiş HTML hemen gösterilir
- Veritabanı erişimi: API gateway olmadan doğrudan erişim — daha düşük latency
Sık Yapılan Hatalar
- Gereksiz yere her bileşeni "use client" olarak işaretlemek
- Server Component içinde hook kullanmaya çalışmak
- Client Component'ten Server Component'e referans geçmeye çalışmak
- Serializable olmayan veri tiplerini prop olarak geçmek (function, class instance)
- Sunucu tarafı hataları doğru handle etmemek
Sonuç
React Server Components, web uygulamalarının performansını ve geliştirici deneyimini önemli ölçüde iyileştiren bir paradigma. Next.js ile birlikte kullanıldığında tam potansiyeline ulaşır. Doğru composition pattern'larını öğrenmek ve client/server sınırını bilinçli çizmek, RSC'den maksimum verim almanın anahtarıdır.
React Server Components ile projelerinizi hızlandırmak mı istiyorsunuz? İletişime geçin.