Suspense sınırı

Suspense ile yükleme sırasında yedek göstermeyi öğrenirsin.

Suspense sınırı

Suspense, alt bileşenlerin yüklenmesini beklerken yedek içerik gösteren bir bileşendir. fallback prop'u yükleme göstergesi alır: bir spinner, bir metin veya bir iskelet yapı.

Suspense'i lazy bileşenin dışına sarmal olarak koyarsın. Yükleme bitince yedek içerik kalkar ve gerçek bileşen çizilir. Bu geçiş otomatiktir.

İyi bir yedek içerik, gerçek içeriğin boyutuna yakın olmalı; böylece yüklenince yer sıçramaz. Buna 'iskelet' (skeleton) denir.

İskelet yedek içerik

İskelet (skeleton) yedek içerik, gerçek içeriğin yer tutucu bir çerçevesidir. Boyut ve biçim gerçek içeriğe yakındır; böylece yükleme bitince yer sıçramaz.

Örnek: bir kartın iskeleti gri arka planlı kutular içerir; metin ve görsel alanları temsil eder. Gerçek içerik yüklendiğinde kutular gerçek içerikle değişir.

Bu yaklaşım kullanıcı deneyimini iyileştirir; boş ekran yerine yapısal bir yükleme göstergesi sunar.

Uygulama İskelet yedek içerik

Aşağıdaki iskeleti tamamla. App bileşeni yaz; <Suspense fallback={"{"<Skeleton />}"}><Card /></Suspense> döndür. Dışa aktar.

Örnek çözümü göster

import { Suspense } from "react";

function App() {
  return (
    <Suspense fallback={<Skeleton />}>
      <Card />
    </Suspense>
  );
}

export default App;

Kendini test et

Suspense fallback ne zaman çizilir?
- Her zaman
- Hata sırasında
- Yükleme sırasında
- Çizim bitince
Cevabı göster

Yükleme sırasında — fallback yükleme sırasında çizilir, bitince kalkar.

fallback prop

<Suspense ____={<Spinner />}><Heavy /></Suspense>

Cevabı göster

<Suspense fallback={<Spinner />}><Heavy /></Suspense>

Suspense sınırı: kavramları eşleştir

Suspense

Yükleme sınırı
fallback

Yedek içerik
skeleton

Yer tutucu çerçeve
Spinner

Dönen yükleme

Sıradaki ders: Çoklu sınır

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler