Çoklu sınır

Birden çok Suspense sınırını stratejik yerleştirmeyi öğrenirsin.

Çoklu sınır

Birden fazla lazy bileşenin varsa, her birine ayrı Suspense sarmalı vermek daha iyi kontrol sağlar. Buna çoklu sınır denir.

Tek Suspense tüm bileşenler yüklene kadar yedek gösterir. Ayrı Suspense'ler ise her bileşen yüklendiği anda gerçek içeriğe geçer; böylece kullanıcı kademeli olarak içerik görür.

Bu yaklaşım büyük sayfalarda iyidir; her bölüm kendi hızında yüklenir ve kullanıcı beklerken bir şeyler görür.

Çoklu sınır örneği

Bir sayfa üç bölüm içerir: header, main ve footer. Her bölüm ayrı bir lazy bileşense, üç ayrı Suspense kullanırsın. Header önce, footer sonra yüklenir; kullanıcı beklerken header'ı görür.

Eğer tek Suspense kullansaydın, tüm bölümler yüklenene kadar yedek gösterilirdi. Bu da daha uzun bekleme demektir.

Çoklu sınır, bölgesel yükleme hatalarını da izole eder; bir bölüm hata verirse diğerleri etkilenmez.

Uygulama Çoklu Suspense

Aşağıdaki iskeleti tamamla. App bileşeni yaz; iki ayrı <Suspense fallback={"{"<Spinner />}"}> içinde <A /> ve <B /> çiz. Dışa aktar.

Örnek çözümü göster

import { Suspense } from "react";

function App() {
  return (
    <div>
      <Suspense fallback={<Spinner />}><A /></Suspense>
      <Suspense fallback={<Spinner />}><B /></Suspense>
    </div>
  );
}

export default App;

Kendini test et

Çoklu sınır ne sağlar?
- Tek yükleme
- Kademeli yükleme
- Daha az kod
- Hızlı çizim
Cevabı göster

Kademeli yükleme — Çoklu sınır her bölümün ayrı yüklenmesini sağlar.

Çoklu Suspense

<Suspense fallback={<Spinner />}><A /></Suspense><____ fallback={<Spinner />}><B /></Suspense>

Cevabı göster

<Suspense fallback={<Spinner />}><A /></Suspense><Suspense fallback={<Spinner />}><B /></Suspense>

Çoklu sınır: kavramları eşleştir

Çoklu Suspense

Kademeli yükleme
Tek Suspense

Hepsi bekler
fallback

Yedek içerik
bölgesel hata

İzole kalır

Sıradaki ders: Özet - Suspense ve lazy

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler