Server bileşenli sayfa
- React kursu
- Uzman seviye
- Ders 27/32
- 5 dk
Server bileşeniyle veri çeken bir sayfa yazarsın.
Server bileşenli sayfa
Üçüncü adımda bir server component sayfa yazacaksın. ProductPage async bir fonksiyondur ve await fetch ile ürünleri çeker.
Başlangıç kodu, Button ve ThemeProvider çözümlerini içerir; böylece tasarım sistemi ve tema hazır. Sayfa, sunucuda çizilir ve HTML olarak istemciye gider.
Ürünler bir <ul> içinde listelenir; her biri key ile izlenir.
İstemci bileşenle birleştirme
Server component'ten istemci bileşenine veri özellik olarak geçilir. Örneğin <Button variant="primary">Satın al</Button> bir client bileşendir; ama ProductPage içinde kullanılabilir.
Bu ayrım, veri çekmenin sunucuda, etkileşimin istemcide olmasını sağlar. Paket küçük, ilk çizim hızlı kalır.
children olarak da istemci bileşen geçilebilir.
Uygulama ProductPage server bileşenini yaz
ProductPage server bileşeni yaz. async function ProductPage(). await fetch('/api/products') ile çek, res.json() ile çöz. <main> içinde <h1>Ürünler</h1> ve <ul> içinde products.map(p => <li key={p.id}>{p.name}</li>). Dışa aktar.
Başlangıç kodu
// Button.jsx
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}
export default Button;
// ThemeProvider.jsx
import { createContext, useState } from 'react';
const ThemeContext = createContext();
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
export default ThemeProvider;
// ProductPage.jsx
// ProductPage server bileşenini buraya yazÖrnek çözüm
async function ProductPage() {
const res = await fetch('/api/products');
const products = await res.json();
return (
<main>
<h1>Ürünler</h1>
<ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
</main>
);
}
export default ProductPage;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Server component kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
async function |
Sunucuda veri çeker |
await fetch |
Veriyi bekler |
res.json |
JSON'a çöz |
products.map |
Listeyi çiz |
2 ProductPage hangi tür bileşendir?
- Client component
- Edge component
- Shared component
- Server component (async) Doğru cevap
Açıklama: ProductPage async bir server component'tir.
3 Boşluğu doldur: ürünleri listele
<ul>{products.map(p => <li ____={p.id}>{p.name}</li>)}</ul><ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>Açıklama: Liste öğeleri key ile izlenir.