Batas Suspense dan Prioritas Streaming

Batas Suspense adalah unit dasar tingkat perincian streaming. Setiap batas Suspense dalam pohon komponen Anda membuat bagian yang dapat dialirkan secara independen — React dapat memproses dan mengalirkan setiap batas sesuai kecepatannya sendiri, tanpa bergantung pada batas lainnya.

Kerangka terdiri dari segala sesuatu di luar batas Suspense — tata letak, navigasi, footer, dan konten apa pun yang tersedia secara sinkron. Kerangka dialirkan terlebih dahulu dan dengan cepat, sehingga pengguna segera melihat struktur halaman sementara bagian yang bergantung pada data dimuat di latar belakang.

Saat React mengalirkan kerangka, setiap batas Suspense yang datanya belum tersedia akan dirender sebagai antarmuka pengguna cadangannya — biasanya kerangka pemuatan atau indikator pemuatan. Cadangan ini disertakan dalam respons HTML awal, sehingga pengguna segera melihat indikator pemuatan, bukan ruang kosong.

Saat data suatu batas Suspense selesai diproses, React mengalirkan HTML yang telah diproses bersama skrip sebaris kecil. Skrip tersebut memindahkan konten yang baru dialirkan dari elemen templat tersembunyi ke posisi yang tepat dalam DOM, lalu mengganti cadangan tanpa memuat ulang seluruh halaman.

React menggunakan pola elemen templat HTML: konten Suspense yang telah diproses dialirkan ke dalam templat tersembunyi, lalu sebuah skrip memanggil fungsi internal React untuk menukar konten templat ke posisi DOM yang tepat. Hal ini memungkinkan manipulasi DOM tanpa kerangka kerja JS untuk melakukan penggantian.

Batas Suspense bertingkat memiliki linimasa penyelesaian yang independen. Batas Suspense bagian dalam dapat selesai diproses sebelum batas luarnya — React mengalirkan konten bagian dalam segera setelah siap, terlepas dari apakah batas luar telah selesai diproses. Hal ini memaksimalkan pemrosesan paralel saat memuat data.

Penempatan Suspense yang efektif menempatkan komponen lambat yang bergantung pada data di dalam batas Suspense, serta konten cepat, statis, atau yang tersedia secara sinkron di luarnya. Bilah navigasi, bagian hero dengan teks statis, dan footer sebaiknya berada di luar. Daftar produk, dasbor pengguna, dan umpan komentar sebaiknya berada di dalam.

React mengalirkan batas Suspense saat batas tersebut selesai diproses — tidak selalu sesuai urutan kemunculannya dalam dokumen. Bagian di bawah area tampilan dapat selesai diproses lebih dahulu daripada bagian di atasnya jika membutuhkan lebih sedikit data. React menangani penyisipan ke DOM dengan benar, apa pun urutan streamingnya.

Hidrasi selektif React 18 merespons interaksi pengguna: jika pengguna mengeklik atau mengarahkan kursor ke batas Suspense yang belum dihidrasi, React memprioritaskan hidrasi batas tersebut terlebih dahulu. Hal ini memastikan interaksi pengguna tetap responsif meskipun bagian lain halaman masih menjalani hidrasi.

Semakin banyak batas Suspense berarti semakin banyak fleksibilitas streaming, tetapi terlalu banyak batas menambah beban dari skrip penggantian sebaris. Panduan praktisnya: bungkus seluruh "bagian" (konten di atas area tampilan, bilah sisi, dan umpan di bawah area tampilan), bukan komponen satu per satu. Satu hingga tiga batas Suspense per halaman biasanya merupakan titik optimal.

Di tab Jaringan Chrome DevTools, gunakan "Pertahankan catatan" dan amati streaming respons: dokumen HTML bertambah dalam beberapa potongan. Tab Performa menampilkan penanda FCP dan LCP — bandingkan hasil antara build dengan streaming dan tanpa streaming untuk mengukur peningkatannya. Batasi jaringan ke 3G Cepat untuk memperjelas dampaknya.

Apa yang terjadi pada cadangan suatu batas Suspense dalam respons HTML streaming awal?

Batas Suspense membagi pohon React Anda menjadi beberapa bagian yang dapat dialirkan secara independen. Kerangka (di luar Suspense) dialirkan terlebih dahulu; cadangan segera muncul untuk batas yang masih menunggu; konten yang telah selesai diproses menggantikan cadangan melalui skrip sebaris. Batas bertingkat memiliki linimasa independen. Tempatkan batas pada tingkat bagian untuk mendapatkan tingkat perincian streaming yang optimal, dan biarkan sistem prioritas React menangani urutan hidrasi berdasarkan interaksi.