Client ve Server ayrımı

'use client' yönergesini ve ayrım kurallarını öğrenirsin.

Client ve Server ayrımı

Server component'ler veri çeker ve HTML üretir; client component'ler interaktivite sağlar. İkisini ayırmanın anahtarı, sınırı doğru yerleştirmektir.

Bir sayfa server component olur, içindeki düğmeler client component olur. Veri server'da çekilir, özellik olarak client bileşene geçilir. Fonksiyon ve sınıf örneği geçilemez.

Bu ayrım paket boyutunu küçültür ve ilk çizimi hızlandırır.

Sınır yerleşimi

'use client' yazılan dosyanın tüm içe aktardıkları da client tarafına geçer. Bu yüzden yönergeyi mümkün olan en alt dosyaya koymak paketi küçük tutar.

Örneğin bir form bileşeni client'tır; ama onu çağıran sayfa server'da kalabilir. Böylece sayfanın veri çekme kısmı sunucuda çalışır.

Küçük düğmeler için ayrı dosya açmak, ağaç boyunca istemcileşmeyi önler.

Uygulama LikeButton client bileşenini yaz

LikeButton client bileşeni yaz. En üste 'use client'. useState(0) ile likes tut. <button onClick={() => setLikes(likes + 1)}>{likes}</button> döndür. Dışa aktar.

Örnek çözümü göster

'use client';
import { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>{likes}</button>;
}
export default LikeButton;

Kendini test et

Boşluğu doldur: client bileşene veri geç

// page.jsx (server)
import LikeButton from './LikeButton';
async function Page() {
  const count = await getCount();
  return <LikeButton ____={count} />;
}

Cevabı göster

// page.jsx (server)
import LikeButton from './LikeButton';
async function Page() {
  const count = await getCount();
  return <LikeButton initial={count} />;
}

Server component'ten client component'e ne geçilemez?
- Sayı ve dizi
- Dize
- Fonksiyon
- Nesne
Cevabı göster

Fonksiyon — Fonksiyonlar serileştirilemediği için geçilemez.
Sınır kavramlarını eşleştir

'use client'

İstemciyi işaretler
async

Server'da veri çeker
prop

Veriyi taşır
fonksiyon

Geçilemez

Sıradaki ders: Veri çekme RSC'de

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler