Özet - Streaming SSR
- React kursu
- Uzman seviye
- Ders 12/32
- 5 dk
Bir sayfanın bir bölümünü Suspense ile geç yükleyen yapı kurarsın.
Özet - Streaming SSR
Bu grupta streaming SSR'ı, Suspense ile akıtmayı ve edge rendering'i öğrendin.
renderToReadableStream sayfayı parça parça gönderir; Suspense akıtma sınırlarını belirler; edge runtime gecikmeyi düşürür. İlk içerik görünümü hızlanır.
Kullanıcı boş ekran beklemez; yavaş bölümler hazır olunca akışa eklenir. Şimdi bir streaming sayfa yazacaksın.
Uygulama StreamArticlePage bileşenini yaz
StreamArticlePage yaz. Suspense içe aktar. <Suspense fallback={<p>Yükleniyor</p>}> içinde <Article /> göster. Dışa aktar.
Başlangıç kodu
// StreamArticlePage bileşenini buraya yazÖrnek çözüm
import { Suspense } from 'react';
import Article from './Article';
function StreamArticlePage() {
return (
<Suspense fallback={<p>Yükleniyor</p>}>
<Article />
</Suspense>
);
}
export default StreamArticlePage;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi doğrudur?
- Suspense akıtma sınırıdır Doğru cevap
- renderToString streaming yapar
- fallback yalnızca hatta gösterilir
- Edge fs modülünü destekler
Açıklama: Suspense sınırı akıtma noktasıdır.
2 Boşluğu doldur: Suspense içe aktar
Soru
import { ____ } from 'react';
<Suspense fallback={<p>...</p>}>
<SlowList />
</Suspense>
Cevap
import { Suspense } from 'react';
<Suspense fallback={<p>...</p>}>
<SlowList />
</Suspense>Açıklama: Suspense react paketinden içe aktarılır.
3 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
renderToReadableStream |
ReadableStream verir |
Suspense |
Akıtma sınırı |
edge |
Yakın noktada çiz |
fallback |
Bekleme içeriği |