Meydan okuma: Streaming sayfa

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.

Örnek çözümü göster

import { Suspense } from 'react';
import SlowFeed from './SlowFeed';

function StreamPage() {
  return (
    <Suspense fallback={<p>Yükleniyor</p>}>
      <SlowFeed />
    </Suspense>
  );
}
export default StreamPage;

Kendini test et

Suspense fallback ne zaman gösterilir?
- Bileşen hazırsa
- Yalnızca hata durumunda
- Hiçbir zaman
- Bileşen beklenirken
Cevabı göster

Bileşen beklenirken — Bekleme sırasında fallback görünür.

Boşluğu doldur: Suspense sınırı ekle

<Suspense fallback={<p>Yükleniyor</p>}>
  <____ />
</Suspense>

Cevabı göster

<Suspense fallback={<p>Yükleniyor</p>}>
  <SlowFeed />
</Suspense>

Sıradaki ders: Meydan okuma: Custom renderer iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler