Suspense ile akıtma
- React kursu
- Uzman seviye
- Ders 10/32
- 4 dk
Suspense sınırı ile bir bölümü geç çizmeyi öğrenirsin.
Suspense ile akıtma
Suspense bileşeni, altındaki yavaş bileşeni beklerken bir fallback gösterir. Hazır olunca gerçek içerikle değiştirilir.
Server tarafında Suspense akıtma noktası olur: fallback HTML hemen gönderilir, yavaş bölüm hazır olunca akışa eklenir. Kullanıcı sayfanın boş kalmasını beklemez.
Birden çok Suspense sınırı bağımsız akıtma sağlar; her bölüm kendi hızında gelir.
Çoklu sınır
Bir sayfada birden çok Suspense sınırı olabilir. Üstteki sınır tüm alt sınır bitene kadar kapanmaz; ama her alt sınır kendi hızında akıtılır.
Bu yüzden yavaş bir bölüm, hızlı bölümleri engellemez. Hızlı bölümler hemen görünür, yavaş bölüm hazır olunca eklenir.
fallback metni kısa ve anlamlı olmalı; kullanıcı ne beklediğini bilmelidir.
Uygulama StreamPage bileşenini yaz
StreamPage yaz. Suspense içe aktar. <Suspense fallback={<p>Yükleniyor</p>}> içinde <SlowList /> göster. Dışa aktar.
Başlangıç kodu
// StreamPage bileşenini buraya yazÖrnek çözüm
import { Suspense } from 'react';
import SlowList from './SlowList';
function StreamPage() {
return (
<Suspense fallback={<p>Yükleniyor</p>}>
<SlowList />
</Suspense>
);
}
export default StreamPage;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: Suspense sınırı ekle
<Suspense fallback={<p>Yükleniyor</p>}>
<____ />
</Suspense><Suspense fallback={<p>Yükleniyor</p>}>
<SlowList />
</Suspense>Açıklama: Suspense içine yavaş bileşen konur.
2 Suspense fallback ne zaman gösterilir?
- Alt bileşen hazırsa
- Yalnızca hata durumunda
- Alt bileşen beklenirken Doğru cevap
- Hiçbir zaman
Açıklama: Bekleme sırasında fallback görünür.
3 Suspense kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
fallback |
Bekleme içeriği |
Suspense |
Akıtma sınırı |
SlowList |
Yavaş bileşen |
stream |
Parça parça akış |