15 Ocak 2024
React Server Components ile Modern Web Geliştirme
React
Next.js
Performance
React Server Components ile Modern Web Geliştirme
React Server Components, modern web geliştirmede yeni bir paradigma sunuyor. Bu teknoloji ile hem performans hem de geliştirici deneyimi açısından önemli avantajlar elde edebiliyoruz.
Server Components Nedir?
Server Components, React bileşenlerinin sunucu tarafında render edilmesini sağlayan bir teknoloji. Bu sayede:
- Daha hızlı ilk yükleme: JavaScript bundle boyutu azalır
- SEO dostu: İçerik sunucu tarafında render edilir
- Veri erişimi: Doğrudan veritabanına erişim mümkün
Örnek Kullanım
tsx// Server Component async function UserProfile({ userId }: { userId: string }) { const user = await db.user.findUnique({ where: { id: userId } }) return ( <div className="user-profile"> <h1>{user.name}</h1> <p>{user.email}</p> </div> ) }
Client vs Server Components
| Özellik | Server Component | Client Component |
|---|---|---|
| Render | Sunucu | Tarayıcı |
| JavaScript Bundle | Dahil değil | Dahil |
| Veri Erişimi | Doğrudan | API üzerinden |
| Interaktivite | Yok | Var |
Sonuç
Server Components, özellikle içerik ağırlıklı uygulamalar için mükemmel bir çözüm. Next.js 13+ ile birlikte kullanımı oldukça kolay hale geldi.