Streaming SSR nedir?
- React kursu
- Uzman seviye
- Ders 9/32
- 4 dk
Çizimin parça parça akıtılabilmesini öğrenirsin.
Streaming SSR nedir?
Streaming SSR, sayfayı parça parça tarayıcıya gönderir; tüm veri hazır olmasını beklemez. renderToReadableStream veya renderToPipeableStream ile çalışır.
İlk HTML hemen gelir, yavaş bölümler hazır olunca eklenir. Bu, ilk içerik görünümü (FCP) süresini belirgin kısaltır.
Next.js App Router'da streaming varsayılan açıktır; Suspense sınırları akıtma noktasını belirler.
renderToReadableStream
Node veya Edge ortamında renderToReadableStream bir ReadableStream döndürür. Tarayıcı bu akışı parça parça okur ve sayfayı aşamalı çizer.
Seçeneklerle bootstrapModules (hidrasyon için client JS) ve hata yakalama belirlenir. Akış tamamlandığında hidrasyon başlar.
Bu yöntem, geleneksel renderToString'ün aksine tüm çizimi beklemez.
Uygulama render fonksiyonunu yaz
Bir render fonksiyonu yaz. renderToReadableStream ve App içe aktar. const stream = await renderToReadableStream(<App />) ile akış başlat ve stream döndür. Dışa aktar.
Başlangıç kodu
// render fonksiyonunu buraya yazÖrnek çözüm
import { renderToReadableStream } from 'react-dom/server';
import App from './App';
async function render() {
const stream = await renderToReadableStream(<App />);
return stream;
}
export default render;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Streaming SSR neyi hızlandırır?
- JavaScript paket boyutu
- İlk içerik görünümü süresi Doğru cevap
- Derleme süresi
- Tip kontrolü
Açıklama: İlk HTML hemen gelir, FCP kısalır.
2 Boşluğu doldur: akışı başlat
import { renderToReadableStream } from 'react-dom/server';
import App from './App';
const stream = await renderToReadable____(<App />);import { renderToReadableStream } from 'react-dom/server';
import App from './App';
const stream = await renderToReadableStream(<App />);Açıklama: renderToReadableStream akışı başlatır.
3 Streaming kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
renderToReadableStream |
ReadableStream verir |
Suspense |
Akıtma sınırı |
bootstrapModules |
Hidrasyon JS |
FCP |
İlk içerik görünümü |