Next.js'te sunucu bileşenleri: ne zaman kullanmalı, ne zaman kaçınmalı

Sunucu bileşenleri React uygulamalarında gerçek bir sıçrama sağladı ama beraberinde yeni bir kafa karışıklığı getirdi: bir bileşen ne zaman sunucuda, ne zaman istemcide çalışmalı?

Varsayılan: sunucu

Basit kural: aksi gerekmedikçe sunucu bileşeni kullanın. Sunucu bileşenleri istemciye JavaScript göndermez. Bir sayfada 30 bileşen varsa ve 25'i sunucuda kalabiliyorsa, paket boyutunuz ciddi biçimde küçülür.

İstemciye ne zaman geçilir?

• useState, useEffect gibi hook'lar gerekiyorsa
• onClick, onChange gibi olay dinleyicileri varsa
• Tarayıcı API'lerine erişiliyorsa (window, localStorage)
• Yalnızca istemcide çalışan kütüphaneler kullanılıyorsa

En sık yapılan hata: sınırı çok yukarı çekmek

Bir sayfada tek bir açılır menü var diye tüm sayfayı "use client" yapmak, o ağacın altındaki her şeyi istemciye taşır. Bunun yerine yalnızca menüyü ayrı bir istemci bileşenine çıkarın.

Pratik yöntem: etkileşimli parçaları yaprak seviyesine itin. Sayfa iskeleti sunucuda kalsın, adacıklar istemcide çalışsın.

Sunucu bileşenlerini istemci bileşeninin içine koyabilirsiniz

Yaygın bir yanılgı, istemci bileşeninin içinde sunucu bileşeni kullanılamayacağı. children olarak geçirdiğinizde çalışır:

<ClientAccordion>
  <ServerContent />  {/* sunucuda render edilir */}
</ClientAccordion>

Veri çekme deseni

Veriyi ihtiyaç duyulan bileşende çekin, tepeden prop olarak taşımayın. Aynı isteğin birden fazla yerde yapılması sorun değil — istek düzeyinde tekilleştirme bunu tek sorguya indirir.

Yavaş veri kaynaklarını Suspense ile sarın; sayfanın geri kalanı beklemeden görünsün.

Dikkat edilecek tuzaklar

• Gizli anahtar sızıntısı: Sunucu bileşeninde tanımlı bir değişkeni istemci bileşenine prop olarak geçirirseniz istemciye gider.
• Aşırı Suspense: Her bileşeni ayrı sarmak, sayfanın parça parça sıçrayarak yüklenmesine ve kötü bir algıya yol açar.
• Önbellek varsayımları: Hangi isteğin ne kadar önbelleklendiğini açıkça belirtin; varsayılana güvenmeyin.

Ölçün

Karar verirken tahmin yerine veriye bakın: derleme çıktısındaki sayfa başına JavaScript boyutu en net göstergedir. Sayfa başına bir bütçe koyun ve derlemede bu bütçeyi aşan sürümleri engelleyin.