SSR Streaming dari Edge

Saat server mengalirkan HTML, browser menerima dan merender konten dalam beberapa bagian, alih-alih menunggu dokumen lengkap. Dengan demikian, pengguna dapat melihat dan berinteraksi dengan bagian halaman yang terlihat — header, navigasi, bagian hero — sementara bagian yang bergantung pada data dan lebih lambat masih dimuat.

Meneruskan bootstrapScripts ke renderToReadableStream memberi tahu React lokasi bundel JS sisi klien. React menyisipkan tag skrip di akhir aliran agar browser memuat bundel dan memanggil hydrateRoot, sehingga halaman menjadi interaktif saat setiap bagian selesai dialirkan.

Pengaliran React mengandalkan batas Suspense untuk membagi pohon komponen menjadi bagian-bagian yang dapat dialirkan secara terpisah. Komponen di dalam batas Suspense yang menunggu data (melalui Promise yang dilemparkan) dialirkan terlebih dahulu sebagai konten sementara, lalu diselesaikan dan konten sebenarnya dialirkan kemudian.

Fungsi panggilan balik onShellReady dipanggil ketika kerangka HTML yang tidak ditangguhkan — segala sesuatu di luar batas Suspense — siap dialirkan. Inilah saat yang tepat untuk menetapkan kode status HTTP dan header respons, lalu memanggil pipe(res) atau mulai membaca dari ReadableStream.

Kode status dan header HTTP harus dikirim sebelum isi respons dimulai. Karena pengaliran dimulai dengan onShellReady, logika penanganan kesalahan apa pun (menetapkan status 500 atau mengarahkan ulang) harus berlangsung sebelum kerangka mulai dialirkan — setelah pengaliran dimulai, kode status terkunci.

onShellError dipanggil ketika terjadi kesalahan fatal sebelum kerangka siap — misalnya, kesalahan pada komponen tingkat atas di luar batas Suspense. Dalam kasus ini, kerangka tidak pernah dialirkan, dan Anda harus merespons dengan halaman kesalahan statis atau mengarahkan ulang ke rute kesalahan.

onError dipanggil untuk kesalahan yang dapat dipulihkan di dalam batas Suspense. React masih dapat mengalirkan sisa halaman; batas yang mengalami kesalahan merender UI cadangan kesalahannya. Gunakan onError untuk pencatatan: catat kesalahan pada platform observabilitas Anda tanpa membatalkan aliran.

Jika data pada batas Suspense memerlukan waktu terlalu lama, tetap alirkan kerangka dan biarkan batas tersebut dihidrasi di klien. Terapkan batas waktu: setelah 5 detik, panggil abort() pada aliran jika batas tersebut belum terselesaikan, dan klien akan mengambil datanya sendiri melalui useEffect.

Waktu proses Workers meneruskan ReadableStream secara langsung sebagai isi Response. Infrastruktur Cloudflare meneruskan setiap bagian ke peramban pengguna saat React menghasilkannya, tanpa menyangga seluruh dokumen. Artinya, byte pertama HTML meninggalkan PoP edge dalam hitungan milidetik setelah permintaan tiba.

renderToReadableStream mengembalikan fungsi pengontrol pembatalan. Jika permintaan dibatalkan (pengguna berpindah halaman), pemanggilan abort() menghentikan React agar tidak terus merender dan memproses data. Hal ini mencegah perhitungan yang terbuang pada permintaan yang sudah tidak diperlukan dan menjaga penggunaan CPU Worker tetap terbatas.

Dengan streaming di edge, seluruh rangkaian latensi terlihat seperti ini: 5 md (permintaan ke PoP terdekat) + 2 md (inisialisasi dingin Worker) + 8 md (rendering kerangka) = 15 md hingga byte pertama. Peramban pengguna merender elemen LCP dari kerangka sementara bagian halaman lainnya terus dialirkan di latar belakang.

Kapan tepatnya panggilan balik onShellReady dijalankan selama streaming SSR?

Streaming SSR dari edge mengirimkan HTML dalam beberapa bagian, sehingga meningkatkan FCP dan LCP dengan mengirimkan kerangka secara langsung. Batas Suspense membagi pohon menjadi bagian-bagian yang dapat dialirkan secara mandiri. onShellReady adalah sinyal untuk mulai menyalurkan data — tetapkan kode status sebelum memanggilnya. onShellError menangani kegagalan fatal, onError menangani kegagalan yang dapat dipulihkan, dan abort() mencegah pekerjaan yang terbuang pada permintaan yang dibatalkan.