Client ve Server ayrımı
- React kursu
- Uzman seviye
- Ders 6/32
- 4 dk
'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.
Başlangıç kodu
// LikeButton client bileşenini buraya yazÖrnek çözüm
'use client';
import { useState } from 'react';
function LikeButton() {
const [likes, setLikes] = useState(0);
return <button onClick={() => setLikes(likes + 1)}>{likes}</button>;
}
export default LikeButton;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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} />;
}// page.jsx (server)
import LikeButton from './LikeButton';
async function Page() {
const count = await getCount();
return <LikeButton initial={count} />;
}Açıklama: Server'dan client'a veri özellik olarak geçer.
2 Server component'ten client component'e ne geçilemez?
- Sayı ve dizi
- Dize
- Fonksiyon Doğru cevap
- Nesne
Açıklama: Fonksiyonlar serileştirilemediği için geçilemez.
3 Sınır kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
'use client' |
İstemciyi işaretler |
async |
Server'da veri çeker |
prop |
Veriyi taşır |
fonksiyon |
Geçilemez |