İ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.

İstemci bileşenleri: etkinleştirme

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 istemci bileşeni olarak işaretler ve yalnızca istemci bileşenleri şunları kullanabilir:

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

Bu ödünleşime dikkat edin. Sunucu bileşeni hızlı ve sessizdir ancak donuktur. İstemci bileşeni canlıdır, ancak kodunun tarayıcıda indirilip ç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.