Server Components
- React kursu
- İleri seviye
- Ders 7/56
- 4 dk
Sunucu bileşenlerinin ne olduğunu ve farkını öğrenirsin.
Server Components
Server Components (RSC), sunucuda çizilen ve tarayıcıya JavaScript gönderilmeyen bileşenlerdir. Bunlar veritabanına, dosya sistemine ve özel API'lere doğrudan erişebilir.
RSC'de useState, useEffect veya tarayıcı API'leri kullanılamaz. İnteraktif öğe gerekiyorsa o parça bir Client Component olur.
Bu ayrım, JavaScript bundle'ını küçük tutar ve ilk yükleme hızlanır.
use client direktifi
Bir dosyanın en üstüne "use client" yazarsan o dosyadaki tüm bileşenler Client Component olur. Bunlar useState, useEffect ve event handler'ları kullanabilir.
Server Component içine Client Component import edebilirsin; tersi olmaz. Bu sınır, performansı optimize eder.
İnteraktif öğeleri küçük Client Component'lere ayırmak en iyi uygulamadır.
Uygulama Client Counter
Üstte "use client" direktifi olan bir Counter bileşeni yaz. useState(0) ile n tut, <button onClick={() => setN(n + 1)}>{n}</button> bas. export default Counter.
Başlangıç kodu
// app/counter.js
// Üste use client direktifini ekle, sonra Counter bileşenini yazÖrnek çözüm
// app/counter.js
"use client";
import { useState } from "react";
export default function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 RSC'de kullanılamayan hook?
- console.log
- fetch
- useState Doğru cevap
- async/await
Açıklama: useState RSC'de kullanılamaz; RSC interaktif değildir.
2 use client direktifi
"____"
import { useState } from "react";
export default function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}"use client"
import { useState } from "react";
export default function Counter() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}Açıklama: "use client" dosyayı Client Component yapar.
3 Server Components: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Server Component |
Sunucuda çizim |
Client Component |
İnteraktif |
"use client" |
Direktif |
useState |
Client only |