Server Components nedir?

Sunucu bileşenlerinin sunucuda çizildiğini öğrenirsin.

Server Components nedir?

Server Components, sunucuda çizilen ve istemciye yalnızca HTML gönderen bileşenlerdir. Veritabanı ve API'ye doğrudan erişebilirler; JavaScript paketine girmezler.

Bir bileşeni istemcide çizmek için dosyanın en üstüne 'use client' yazarsın. Bu, tarayıcıda interaktif bileşen olduğunu bildirir.

Next.js App Router'da varsayılan olarak tüm bileşenler server component'tir.

'use client' yönergesi

Bir dosyayı istemci bileşenine çevirmek için en üste 'use client' yazarsın. Bu dosyadaki tüm bileşenler tarayıcıda çizilir; useState ve onClick kullanabilirsin.

Server component'ten client component'e veri özellik (prop) olarak geçilir; ancak fonksiyon geçilemez. Client bileşen, server bileşenin çocuğu olabilir.

Bir bileşen hem sunucu hem istemci olamaz; yönerge dosya bazında çalışır.

Uygulama ProductList server bileşenini yaz

ProductList server bileşeni yaz. async function olsun. await fetch('https://api.example.com/products') ile veri çek, res.json() ile çöz. <ul> içinde products.map ile <li key={p.id}>{p.name}</li> göster. Dışa aktar.

Örnek çözümü göster

async function ProductList() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  return (
    <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
  );
}
export default ProductList;

Kendini test et

App Router'da varsayılan bileşen türü hangisidir?
- Client Component
- Server Component
- Shared Component
- Edge Component
Cevabı göster

Server Component — App Router'da varsayılan server component'tir.

Boşluğu doldur: istemci bileşeni işaretle

'____';
import { useState } from 'react';
function LikeButton() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Cevabı göster

'use client';
import { useState } from 'react';
function LikeButton() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Bileşen türlerini eşleştir

Server Component

Sunucuda çizilir
Client Component

Tarayıcıda çizilir
'use client'

İstemciyi işaretler
async

Veri çekmeye izin verir

Sıradaki ders: Client ve Server ayrımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler