Özet - Streaming SSR

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.

Örnek çözümü göster

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

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

Kendini test et

Aşağıdakilerden hangisi doğrudur?
- Suspense akıtma sınırıdır
- renderToString streaming yapar
- fallback yalnızca hatta gösterilir
- Edge fs modülünü destekler
Cevabı göster

Suspense akıtma sınırıdır — Suspense sınırı akıtma noktasıdır.

Boşluğu doldur: Suspense içe aktar

import { ____ } from 'react';

<Suspense fallback={<p>...</p>}>
  <SlowList />
</Suspense>

Cevabı göster

import { Suspense } from 'react';

<Suspense fallback={<p>...</p>}>
  <SlowList />
</Suspense>

Kavramları eşleştir

renderToReadableStream

ReadableStream verir
Suspense

Akıtma sınırı
edge

Yakın noktada çiz
fallback

Bekleme içeriği

Sıradaki ders: Concurrent React nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler