İki Çeşit Bileşen

Bu bölümde şimdiye kadar yazdığınız her bileşen fark etmemiş olabileceğiniz bir yerde çalıştı: sunucuda. Bu açtığınız özel bir mod değildir: varsayılandır ve Next.js'deki tek en büyük fikirdir.

Tam olarak iki tür bileşen vardır ve her biri size diğerinin sağlayamayacağı bir şey sunar.

Sunucu bileşenleri: varsayılan

• Sayfa gönderilmeden önce, bir kez sunucuda çalışırlar
• async olabilirler, böylece verileri doğrudan bileşenin içinde await edebilirler
• Tarayıcıya hiç JavaScript göndermezler: kullanıcı kodu değil, sonucu indirir

Püf noktası şudur: Sayfa tarayıcıya ulaştığında, bir sunucu bileşeninin işi bitmiştir. Bu bir anlık görüntüdür (snapshot). Hiçbir şeyi hatırlayamaz, bir tıklamaya tepki veremez veya değişemez.

Client component'leri: dahil edilme (opt in)

Sayfanın yanıt vermesini istediğinizde, en üste tek bir satır ekleyerek dosyayı tarayıcıya dahil edersiniz:

'use client';

Bu, dosyayı bir client bileşeni (istemci bileşeni) olarak işaretler ve yalnızca client bileşenleri şunları kullanabilir:

• Hook'lar: useState, useEffect ve benzerleri
• Olay işleyicileri (Event handlers): onClick, onChange, …
• Tarayıcı API'leri: window, localStorage

Aradaki farka dikkat edin. Bir server bileşeni hızlı ve sessizdir ancak donmuştur. Bir client bileşeni ise canlıdır ancak kodunun taranıp tarayıcıda indirilmesi ve çalıştırılması gerekir.

Bu nedenle bundan sonra her bileşen hakkında soracağınız soru "hangisini beğeniyorum?" değil, "bu özel parçanın kullanıcıya yanıt vermesi gerekiyor mu?" olacaktır. Cevap hayır ise (ki genellikle öyledir), sunucuda bırakın.