Edge rendering
- React kursu
- Uzman seviye
- Ders 11/32
- 4 dk
Edge üzerinde çizim yapmanın farklarını öğrenirsin.
Edge rendering
Edge rendering, sayfayı kullanıcıya en yakın üç noktada (edge) çizer. Gecikme düşer, ilk bayt süresi (TTFB) kısalır.
Next.js'te bir yol için export const runtime = 'edge' yazarsın. Edge fonksiyonları hafif ve hızlıdır; ama Node API'lerinin tümünü desteklemez.
Veritabanı doğrudan değil, bir API üzerinden çağrılır. Edge, küçük ve statik bağımlılıklar için uygundur.
Edge sınırları
Edge fonksiyonları fs (dosya sistemi) ve child_process gibi Node modüllerini kullanamaz. Yerel dosya okumak yerine API çağrısı yaparsın.
Bellek ve süre sınırları daha sıkıdır; ağır işleme uygun değildir. Ama küçük, hızlı yanıtlar için idealdir.
Edge'de fetch ve Response gibi web API'leri tam desteklenir.
Uygulama Edge sayfasını yaz
Bir edge sayfası yaz. export const runtime = 'edge'. function Page() ile <h1>Edge</h1> döndür. Dışa aktar.
Başlangıç kodu
// Edge sayfasını buraya yazÖrnek çözüm
export const runtime = 'edge';
function Page() {
return <h1>Edge</h1>;
}
export default Page;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Edge kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
runtime: edge |
Üç noktada çiz |
TTFB |
İlk bayt süresi |
Node API |
Tümü desteklenmez |
yakın nokta |
Gecikme düşer |
2 Edge fonksiyonları hangi modülü kullanamaz?
- fetch
- Response
- Request
- fs (dosya sistemi) Doğru cevap
Açıklama: fs Node'a özgüdür, Edge'de yoktur.
3 Boşluğu doldur: edge çalışma zamanını ayarla
export const ____ = 'edge';
function Page() {
return <h1>Edge</h1>;
}export const runtime = 'edge';
function Page() {
return <h1>Edge</h1>;
}Açıklama: runtime değişkeni çalışma zamanını belirler.