Server Components

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.

Örnek çözümü göster

// 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>;
}

Kendini test et

RSC'de kullanılamayan hook?
- console.log
- fetch
- useState
- async/await
Cevabı göster

useState — useState RSC'de kullanılamaz; RSC interaktif değildir.

use client direktifi

"____"

import { useState } from "react";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Cevabı göster

"use client"

import { useState } from "react";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Server Components: kavramları eşleştir

Server Component

Sunucuda çizim
Client Component

İnteraktif
"use client"

Direktif
useState

Client only

Sıradaki ders: Özet - SSR ve SSG

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler