Digital Transformation
Streaming SSR
Streaming SSR adalah teknik server-side rendering yang mengirim potongan HTML secara bertahap ke browser begitu siap, bukan menunggu seluruh halaman selesai diproses, sehingga TTFB dan LCP lebih cepat.
TL;DR: Streaming SSR mengirim HTML ke browser secara bertahap (chunked) saat data siap, bukan menunggu seluruh halaman selesai. Hasilnya: Time to First Byte lebih cepat, Largest Contentful Paint turun signifikan, dan pengguna melihat konten utama lebih awal. Next.js 13+ dengan React Server Components mengaktifkannya secara default lewat Suspense boundary.
Apa itu Streaming SSR?
Streaming Server-Side Rendering adalah evolusi dari SSR tradisional. Pada SSR klasik, server harus menyelesaikan seluruh proses rendering halaman, termasuk semua data fetching, sebelum mengirim HTML ke browser. Streaming SSR memecah halaman menjadi potongan-potongan dan mengirim setiap potongan begitu siap.
Analogi sederhana: bayangkan restoran. SSR tradisional menunggu semua pesanan satu meja selesai sebelum diantar. Streaming SSR mengantar tiap hidangan begitu chef selesai memasak, sehingga tamu bisa mulai makan lebih cepat.
Cara Kerja Streaming SSR di Next.js
| Tahap | Yang Terjadi |
|---|---|
| Request masuk | Server mulai render shell HTML (header, navigasi) |
| Suspense boundary | Komponen dengan data fetch dibungkus Suspense fallback |
| Stream chunk 1 | Shell HTML dikirim duluan, browser mulai render |
| Data ready | Begitu data fetch selesai, chunk komponen dikirim |
| Hydration progresif | React menyatukan chunk dengan JavaScript bertahap |
Trik kuncinya: gunakan <Suspense fallback={...}> di sekitar komponen yang butuh data lambat. Komponen lain tetap di-stream duluan tanpa menunggu.
Kenapa Penting?
Untuk website bisnis Indonesia dengan pengguna di koneksi 4G atau wilayah dengan latency tinggi, streaming SSR bisa menurunkan LCP 30-50% pada halaman yang banyak fetch data. Dampaknya langsung ke skor Core Web Vitals dan ranking SEO. Untuk e-commerce, ini berarti shopper melihat hero produk lebih cepat, bounce rate turun, konversi naik.
Pertanyaan Umum
Apakah Streaming SSR sama dengan SSG?
Tidak. SSG menghasilkan HTML statis saat build time. Streaming SSR me-render di server saat request, tapi mengirim HTML bertahap. Streaming SSR lebih dinamis, SSG lebih cepat tapi kurang fleksibel untuk konten personalisasi.
Apakah semua framework mendukung streaming SSR?
Belum. Saat ini Next.js 13+ App Router, Remix, dan SvelteKit mendukung penuh. Framework lama seperti Create React App tidak mendukung tanpa konfigurasi khusus. Per April 2026, ekosistem React semakin standar ke streaming via React Server Components.
Istilah Terkait