Streaming SSR nedir?

Ç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.

Örnek çözümü göster

import { renderToReadableStream } from 'react-dom/server';
import App from './App';

async function render() {
  const stream = await renderToReadableStream(<App />);
  return stream;
}
export default render;

Kendini test et

Streaming SSR neyi hızlandırır?
- JavaScript paket boyutu
- İlk içerik görünümü süresi
- Derleme süresi
- Tip kontrolü
Cevabı göster

İlk içerik görünümü süresi — İlk HTML hemen gelir, FCP kısalır.

Boşluğu doldur: akışı başlat

import { renderToReadableStream } from 'react-dom/server';
import App from './App';

const stream = await renderToReadable____(<App />);

Cevabı göster

import { renderToReadableStream } from 'react-dom/server';
import App from './App';

const stream = await renderToReadableStream(<App />);

Streaming kavramlarını eşleştir

renderToReadableStream

ReadableStream verir
Suspense

Akıtma sınırı
bootstrapModules

Hidrasyon JS
FCP

İlk içerik görünümü

Sıradaki ders: Suspense ile akıtma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler