Digital Transformation
SSR Streaming (Server-Side Rendering Streaming)
SSR Streaming adalah teknik render server yang mengirim potongan HTML ke browser secara bertahap, sehingga halaman terasa lebih cepat dimuat dibanding SSR klasik.
TL;DR: SSR Streaming mengirim potongan HTML dari server ke browser begitu siap, tidak menunggu seluruh halaman selesai dirender. Hasilnya, Time to First Byte tetap rendah dan konten kritis tampil lebih cepat. Teknik ini umum di Next.js App Router lewat Suspense dan React Server Components.
Apa itu SSR Streaming?
SSR Streaming adalah evolusi dari Server-Side Rendering klasik yang membagi halaman menjadi beberapa potongan dan mengirimnya secara bertahap. Browser bisa menampilkan navigasi atau konten utama lebih awal sambil menunggu bagian yang lebih lambat, misalnya rekomendasi produk atau komentar.
Analoginya seperti restoran yang mengantar hidangan pembuka begitu siap, tidak menunggu seluruh menu lengkap. Pengguna mulai makan lebih cepat, persepsi waktu tunggu turun.
Cara Kerja Singkat
| Tahap | Yang dikirim | Contoh |
|---|---|---|
| Initial chunk | HTML shell, header, navigasi | Logo, menu utama |
| Suspense boundary | Konten kritis | Hero, judul artikel |
| Deferred chunks | Komponen lambat | Komentar, rekomendasi, widget pihak ketiga |
Di Next.js, mekanismenya dibungkus dengan <Suspense fallback={...}>. Saat data belum siap, fallback yang dirender. Begitu data tiba, server mengirim chunk pengganti.
Kenapa Penting?
Untuk marketer Indonesia yang banyak audiensnya pakai jaringan 4G tidak stabil, SSR Streaming membantu menjaga Core Web Vitals, terutama LCP. Berdasarkan praktik di vitoatmo.com per April 2026, halaman artikel berat dengan komentar pihak ketiga turun TTFB sekitar 30-40 persen setelah komponen non-kritis dipindah ke Suspense boundary.
Selain performa, streaming bermanfaat untuk SEO karena bot Google membaca HTML pertama tanpa harus menunggu hidrasi penuh. Praktik ini sejalan dengan rekomendasi web.dev tentang streaming SSR.
Pertanyaan Umum
Apakah SSR Streaming sama dengan SSR biasa?
Tidak. SSR klasik menunggu seluruh HTML selesai sebelum mengirim. SSR Streaming mengirim bertahap sehingga konten pertama tampil lebih cepat.
Kapan tidak cocok pakai streaming?
Ketika halaman butuh data terpadu dan SEO sangat sensitif terhadap kelengkapan markup awal, misalnya halaman produk e-commerce dengan harga dinamis yang wajib akurat saat pertama kali tampil.
Istilah Terkait