Streaming

Ketika lo bikin halaman yang nge-load beberapa data sekaligus, lo bisa pake streaming supaya halaman tersebut bisa ditampilkan lebih cepat alias nggak nge-block proses rendering. Konsepnya sama kayak yang ada di Next.js, cuman beda caranya aja.

Anggap aja lo punya halaman detail produk yang nampilin inforasi produk dan review produk. Dari kedua data tersebut, yang paling penting adalah informasi produk, sedangkan review produk bisa ditampilin belakangan.

Contohnya kayak gini:

Penjelasannya gini:

• Di loader, kita ambil data produk dan review produk.
  • Data informasi produk ini penting, jadi kita await supaya bisa langsung ditampilin.
  • Sedangkan review produk kita nggak await, supaya bisa di-stream.
• Di dalam component Product, kita pake <Await> dan <Suspense> buat nge-handle data review yang di-stream.
  • <Await> bakal nunggu data review resolve dan nge-render list review lewat pattern render props.
  • <Suspense> bakal nampilin fallback UI (dalam hal ini, "Loading reviews...") selama data review belum tersedia.

Basic-nya kayak gitu. Kalo seaindainya lo pake React 19, lo bisa pke React.use. Tapi, perlu diabstrak jadi dua komponen:

Sementara isi dari komponen ProductReviews adalah:

Bebas aja lo mau pake yang mana.