Server Components nedir?
- React kursu
- Uzman seviye
- Ders 5/32
- 4 dk
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.
Başlangıç kodu
// ProductList server bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 App Router'da varsayılan bileşen türü hangisidir?
- Client Component
- Server Component Doğru cevap
- Shared Component
- Edge Component
Açıklama: App Router'da varsayılan server component'tir.
2 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>;
}'use client';
import { useState } from 'react';
function LikeButton() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}Açıklama: 'use client' istemci bileşeni başlatır.
3 Bileşen türlerini eşleştir
| Kavram | Anlamı |
|---|---|
Server Component |
Sunucuda çizilir |
Client Component |
Tarayıcıda çizilir |
'use client' |
İstemciyi işaretler |
async |
Veri çekmeye izin verir |