Suspense ile akıtma

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.

Örnek çözümü göster

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

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

Kendini test et

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>}>
  <SlowList />
</Suspense>

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

Alt bileşen beklenirken — Bekleme sırasında fallback görünür.
Suspense kavramlarını eşleştir

fallback

Bekleme içeriği
Suspense

Akıtma sınırı
SlowList

Yavaş bileşen
stream

Parça parça akış

Sıradaki ders: Edge rendering

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler