Server Client vs Client Component

Next.js'te Component'ler varsayılan olarak sunucuda çalışır. Ancak sen istersen tarayıcıda çalışırlar.

Bir Server Component sunucuda render edilir ve düz HTML olarak gelir. JavaScript'i tarayıcıya hiç inmez. Bu hız ve SEO için harika, ama bu aynı zamanda tarayıcıya özel hiçbir şey yapamayacağı anlamına gelir — useState yok, useEffect yok, onClick yok, localStorage yok.

Bunlardan birisini kullanmaya ihtiyacımız olduğunda, çözüm dosyanın en üstüne aşağıdaki satırı eklemek:

"use client";

Bu satır component'i zaten bildiğimiz React'a geri çeviriyor.

Benimsediğim kural şu: her şeyi Server Component bırak, sadece küçük interaktif parçaları client yap. Bu sitede bunlar neredeyse sadece tema butonu, dil değiştirici, mobil menü ve iletişim formu. Geri kalan her şey sunucuda render ediliyor, böylece sayfa hafif kalıyor.

Bir Client Component, bir Server Component'i import edip render edemez. Ama onu children olarak alabilir:

<Reveal>      {/* client */}
  <Hero />    {/* server, children olarak veriliyor */}
</Reveal>

Bu oturunca, ikisini bir arada kullanmak garip gelmeyi bıraktı.