Streaming React 18: Cara Kerja renderToPipeableStream

Sebelum React 18, perenderan sisi server menggunakan renderToString, yang bersifat sinkron: React merender seluruh pohon komponen menjadi string sebelum mengirim HTML apa pun ke peramban. Jika ada komponen yang memuat data, server harus menunggu semua data sebelum byte pertama sampai kepada pengguna.

React 18 memperkenalkan renderToPipeableStream, yang merender pohon komponen sebagai aliran potongan HTML. Alih-alih menunggu semuanya siap, React mengirim HTML setelah setiap bagian pohon selesai, sehingga peramban dapat segera mulai merender konten yang terlihat.

renderToPipeableStream mengembalikan objek dengan dua metode: pipe(writable) dan abort(). pipe menerima aliran Writable Node.js (biasanya respons HTTP) dan mulai mengalirkan HTML ke dalamnya. abort() membatalkan aliran, dan digunakan ketika permintaan dibatalkan atau batas waktu terlampaui.

Aliran dimulai dengan kerangka HTML—semua konten yang tidak terhalang oleh batas Suspense yang masih menunggu. Ini mencakup kepala dokumen, navigasi, kaki halaman, elemen tata letak, dan konten apa pun yang tersedia secara sinkron. Kerangka dialirkan segera, sebelum komponen yang bergantung pada data selesai.

Komponen di dalam batas Suspense yang sedang menunggu data awalnya dialirkan sebagai UI cadangannya (misalnya, indikator pemuatan). React kemudian mengirim tag skrip yang mengganti UI cadangan dengan konten yang telah selesai—semuanya tanpa perenderan ulang kerangka di sisi klien.

Teruskan bootstrapScripts: ['/static/js/client.js'] ke renderToPipeableStream untuk memberi tahu React agar menyisipkan tag skrip di akhir aliran. Peramban memuat bundel ini dan memanggil hydrateRoot untuk memasang penangan peristiwa React pada DOM yang dirender server.

onShellReady dijalankan ketika kerangka HTML (segala sesuatu di luar batas Suspense yang masih menunggu) siap dikirim. Inilah saat yang tepat untuk memanggil pipe(res)—namun, yang penting, tetapkan kode status HTTP dan tajuk respons sebelum memanggil pipe karena pengaliran akan mengunci status HTTP.

Karena streaming langsung dimulai saat Anda memanggil pipe(), setiap penetapan res.setHeader atau res.statusCode harus dilakukan sebelum pemanggilan pipe. Pola yang umum adalah menetapkan status 200 dan Content-Type: text/html dalam callback onShellReady, lalu segera memanggil pipe(res) setelahnya.

onShellError dipanggil saat terjadi kesalahan yang tidak dapat dipulihkan sebelum kerangka selesai dirender — misalnya, komponen tingkat atas melempar kesalahan di luar batas Suspense mana pun. Dalam kasus ini, Anda tidak dapat mengalirkan respons sebagian; sebagai gantinya, alihkan ke halaman kesalahan atau kirim dokumen HTML kesalahan statis.

onAllReady dipanggil saat seluruh pohon React telah selesai diproses — termasuk semua batas Suspense. Untuk perayap mesin pencari dan penampil pratinjau tautan media sosial, Anda perlu mengirim HTML lengkap tanpa streaming. Periksa apakah permintaan berasal dari bot, lalu panggil pipe(res) dalam onAllReady, bukan dalam onShellReady.

onError dipanggil untuk kesalahan dalam batas Suspense — React masih dapat mengalirkan sisa halaman sementara batas tersebut menampilkan antarmuka pengguna kesalahannya sebagai cadangan. Gunakan onError untuk mencatat kesalahan ke alur observabilitas Anda tanpa menghentikan aliran bagi pengguna.

renderToPipeableStream adalah primitif SSR React 18 untuk server Node.js. Fitur ini segera mengalirkan kerangka HTML melalui onShellReady, mengisi batas Suspense saat data selesai diproses, dan melakukan hidrasi pada klien melalui bootstrapScripts. Gunakan onAllReady untuk bot dan perayap, onShellError untuk kegagalan fatal, dan selalu tetapkan header HTTP sebelum memanggil pipe().