Nextjs Streaming Suspense Parallel Routes Intercepting Routes
Definisi
Empat fitur App Router ini berurusan dengan satu pertanyaan yang sama: bagaimana menyerahkan UI ke user secepat mungkin sambil tetap menangani data dan layout yang berat.
- Streaming: kemampuan server mengirim HTML secara bertahap. Shell halaman dikirim duluan, bagian yang butuh data menyusul lewat chunk.
- Suspense: boundary React yang menampilkan fallback selama komponen async (biasanya Server Component yang
await) belum selesai. - Parallel Routes: merender beberapa halaman/segments secara bersamaan di dalam satu layout lewat slot bertanda
@folder. - Intercepting Routes: mencegat route dari segment lain sehingga bisa ditampilkan di layout saat ini (pola umum: modal), tanpa pindah halaman penuh.
Keempatnya bukan fitur yang saling ganti. Streaming + Suspense adalah soal kapan konten tampil; Parallel + Intercepting adalah soal bagaimana beberapa route hidup berdampingan.
Kapan dipakai
Gunakan Streaming + Suspense kalau:
- halaman punya data lambat (query DB, API eksternal) yang tidak perlu memblokir seluruh render
- kamu ingin shell navigasi, header, dan konten statis tampil duluan
- ada beberapa bagian halaman dengan kecepatan data berbeda-beda
Gunakan Parallel Routes kalau:
- satu layout harus menampilkan beberapa panel independen (dashboard: grafik + list + aktivitas)
- dua route berbeda harus hidup di area yang sama tanpa saling menunggu
- kamu butuh pola modal yang punya URL sendiri tapi tidak mengganti halaman belakang
Gunakan Intercepting Routes kalau:
- klik dari suatu daftar (feed, grid) harus membuka overlay/modal, tapi URL langsung (share/refresh) harus membuka halaman penuh
- route yang di-intercept sudah ada sebagai halaman normal, dan kamu tidak mau menduplikasi UI
Kalau aplikasi masih satu halaman datar tanpa panel ganda atau modal ber-URL, keempatnya kemungkinan besar belum dibutuhkan.
Cara kerja Streaming dan Suspense
Di App Router, Server Component yang menjalankan await otomatis menjadi titik stream. React membungkus segmen yang belum siap dengan Suspense, mengirim fallback ke klien, lalu menyambungkan hasilnya lewat chunk HTTP ketika data sudah ada.
loading.tsx adalah gula sintaks: Next.js membungkus page.tsx segment itu dengan boundary Suspense secara otomatis. Di balik layar, ini setara dengan menulis <Suspense fallback={<Loading/>}>.
