Server Components'ta state sınırlarını doğru çizmek

Server Components, React'ın veri akışını yeniden düşünmenin bir yolu. Ama 'use client' direktifini nereye koyduğunuz, uygulamanızın performansını ve mimarisini doğrudan etkiler.

Alt ağaç kuralı: En aşağı itin

En yaygın hata, 'use client' direktifini çok yukarı koymak. Bir bileşen client'a geçtiğinde, tüm alt bileşenleri de client'a dahil olur. Bu yüzden sınırı mümkün olduğunca aşağı çekmek önemli.

Children prop'u ile server bileşenleri geçirmek

Bir client bileşeninin içinde server bileşeni render etmek mümkün değil, ama children prop'u olarak geçirmek mümkün. Bu, interaktif bir wrapper'ı client'ta tutup içeriği server'da bırakmanın en temiz yolu.

// app/page.tsx (Server)
<InteractiveWrapper>
  <ServerContent />
</InteractiveWrapper>

// InteractiveWrapper.tsx (Client)
'use client';
export function InteractiveWrapper({ children }) {
  return <div onClick={...}>{children}</div>;
}

State nerede yaşamalı?

Basit kural: state sadece interaktif olduğunda client'ta olmalı. Veri çekme, formatting, hesaplama — bunların hepsi server'da kalabilir.

• useState, useEffect → client
• Veri çekme → server
• Statik hesaplama → server
• Event handler → client

Her 'use client' direktifi bir maliyettir. Gereksiz yere eklemek, bundle'ınızı şişirir ve server'ın avantajlarını elinizden alır.

Pratik kontrol listesi

Bir bileşen yazmadan önce kendinize sorun: Bu bileşen interaktif mi? State tutuyor mu? Browser API'si kullanıyor mu? Cevap hayırsa, server'da kalsın.