Meydan okuma: Streaming sayfa
- React kursu
- Uzman seviye
- Ders 31/32
- 6 dk
Suspense ile bir bölümü geç yükleyen bir streaming sayfa yazarsın.
Meydan okuma: Streaming sayfa
Bu meydan okumada Suspense ile akıtan bir sayfa yazacaksın. Yavaş bileşen hazır olana kadar bir fallback gösterilir.
Sayfa açıldığında ilk HTML hemen gelir; yavaş bölüm hazır olunca akışa eklenir. Kullanıcı boş ekran beklemez; yavaş bölüm hazırlanırken yedek içerik görünür. Bu deneyim daha akıcıdır.
Uygulama StreamPage bileşenini yaz
StreamPage yaz. Suspense içe aktar. <Suspense fallback={<p>Yükleniyor</p>}> içinde <SlowFeed /> göster. Dışa aktar.
Başlangıç kodu
// StreamPage bileşenini buraya yazÖrnek çözüm
import { Suspense } from 'react';
import SlowFeed from './SlowFeed';
function StreamPage() {
return (
<Suspense fallback={<p>Yükleniyor</p>}>
<SlowFeed />
</Suspense>
);
}
export default StreamPage;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Suspense fallback ne zaman gösterilir?
- Bileşen hazırsa
- Yalnızca hata durumunda
- Hiçbir zaman
- Bileşen beklenirken Doğru cevap
Açıklama: Bekleme sırasında fallback görünür.
2 Boşluğu doldur: Suspense sınırı ekle
Soru
<Suspense fallback={<p>Yükleniyor</p>}>
<____ />
</Suspense>
Cevap
<Suspense fallback={<p>Yükleniyor</p>}>
<SlowFeed />
</Suspense>Açıklama: Suspense içine yavaş bileşen konur.