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

ÖzellikServer ComponentClient Component
RenderSunucuTarayıcı
JavaScript BundleDahil değilDahil
Veri ErişimiDoğrudanAPI üzerinden
InteraktiviteYokVar

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.