Server-Sent Events: Cara Website Bisnis Indonesia Kirim Notifikasi Realtime Tanpa Beban WebSocket
SSE memberi pengalaman realtime untuk dashboard, status pesanan, dan progress proses tanpa kompleksitas WebSocket. Cocok untuk tim kecil di Indonesia.
TL;DR: Server-Sent Events (SSE) adalah protokol HTTP satu arah dari server ke browser yang memungkinkan website mengirim update realtime, misalnya notifikasi pesanan atau progress upload. SSE lebih sederhana dari WebSocket karena memakai koneksi HTTP biasa, otomatis reconnect, dan tidak butuh library khusus di sisi browser. Untuk 80% kebutuhan realtime di website bisnis Indonesia, SSE sudah cukup dan jauh lebih murah dirawat.
Saat membangun fitur tracking pesanan untuk klien e-commerce di tahun lalu, saya sempat tergoda memakai WebSocket dari awal. Setelah dua minggu perawatan, saya menulis ulang ke SSE dalam satu sore. Beban server turun, dan tim support berhenti komplain soal koneksi yang sering putus.
Banyak tim teknis di Indonesia memilih WebSocket secara default ketika mendengar kata "realtime". Padahal sebagian besar use case bisnis hanya butuh aliran satu arah, dari server ke pengguna, dan SSE menyediakan itu dengan ongkos jauh lebih ringan.
Apa Itu Server-Sent Events dan Kapan Memakainya
SSE memakai koneksi HTTP biasa yang tetap terbuka, sehingga server bisa mendorong pesan ke browser kapan saja. Browser membaca aliran pesan lewat objek bawaan EventSource, tanpa library tambahan. Berbeda dengan WebSocket yang dua arah, SSE hanya server ke klien.
Pola ini cocok untuk skenario berikut: notifikasi pesanan baru di dashboard admin, indikator status pembayaran realtime, progress upload file besar, hingga update harga di halaman produk. Di sisi lain, untuk fitur seperti chat dua arah atau game multiplayer, WebSocket tetap pilihan tepat. Lihat referensi terkait di API resmi browser dan konsep edge function yang sering dipakai bersama SSE.
Menurut dokumentasi MDN tentang Server-Sent Events, EventSource melakukan reconnect otomatis ketika koneksi terputus, lengkap dengan ID pesan terakhir untuk resume. Fitur ini hampir mustahil ditiru WebSocket tanpa kode tambahan.
Perbandingan Singkat: SSE, WebSocket, dan Polling
| Aspek | SSE | WebSocket | Long Polling |
|---|---|---|---|
| Arah | Server ke klien | Dua arah | Klien tarik server |
| Protokol | HTTP/1.1 atau HTTP/2 | ws://, wss:// | HTTP biasa |
| Reconnect otomatis | Ya, bawaan | Manual | Manual |
| Beban server | Rendah | Sedang | Tinggi |
| Cocok untuk | Notifikasi, progress, feed | Chat, game, kolaborasi | Fallback browser lama |
Untuk dashboard bisnis Indonesia yang umumnya butuh push satu arah, SSE memenangkan trade-off antara kesederhanaan dan ongkos infrastruktur. WebSocket baru bernilai ketika interaksi dua arah benar-benar dibutuhkan.
Studi Kasus: Tracking Pesanan di Vetmo
Saat membangun Vetmo untuk layanan pet care, saya membutuhkan halaman status booking yang update otomatis tanpa pengguna refresh. Awalnya tim memakai polling tiap 5 detik. Hasilnya: beban API meningkat 8 sampai 12 kali lipat di jam sibuk, dan biaya hosting Supabase ikut naik.
Setelah migrasi ke SSE pada satu endpoint Next.js Route Handler dengan stream Response, beban API turun ke level baseline. Pengguna melihat update status dalam 200 sampai 500 ms tanpa interaksi tambahan. Implementasinya kurang dari 60 baris kode di sisi server, dan hanya 10 baris di sisi browser memakai EventSource. Konsep mirip streaming SSR tapi untuk data bisnis, bukan halaman.
Praktik standar di industri menunjukkan SSE pas untuk feed dengan frekuensi 1 sampai 10 pesan per detik per klien. Di atas itu, pertimbangkan batching atau pindah ke arsitektur message queue yang lebih kuat.
Pertanyaan Umum
Apakah SSE didukung semua browser?
Ya. SSE didukung Chrome, Firefox, Safari, dan Edge versi modern. Internet Explorer tidak mendukung, tapi sejak akhir support IE pada 2022, ini bukan kendala lagi untuk pasar Indonesia.
Berapa banyak koneksi SSE bisa ditangani satu server?
Tergantung memori dan model worker. Server Node.js sederhana dengan 1 vCPU dan 1 GB RAM umumnya bisa menangani 5.000 sampai 10.000 koneksi SSE bersamaan. Memakai HTTP/2 atau HTTP/3 menaikkan limit ini karena multiplexing.
Bagaimana SSE bekerja di balik load balancer?
Pastikan timeout proxy lebih panjang dari interval pesan, biasanya minimal 60 detik. Di Vercel, Cloudflare, atau Nginx, atur header [Cache](/glosarium/cache)-Control: no-cache dan Connection: keep-alive agar stream tidak terpotong. Praktik ini juga relevan untuk konsep edge runtime.
Apakah SSE aman untuk data sensitif?
Aman jika dikirim lewat HTTPS (lihat SSL HTTPS) dan dilindungi authentication header atau cookie. Tambahkan rate limiting di sisi server untuk mencegah penyalahgunaan koneksi panjang.
Penutup: Pilih Sederhana Sebelum Pilih Canggih
WebSocket adalah palu yang sah, tapi tidak setiap kebutuhan realtime adalah paku dua arah. Untuk website bisnis Indonesia yang biasanya hanya perlu mendorong notifikasi atau progress, SSE memberi 90% manfaat dengan 30% kompleksitas. Mulai dari sini, dan upgrade ke WebSocket hanya jika kebutuhan dua arah benar-benar muncul.
Artikel Terkait
Website Bisnis
SSR vs SSG vs ISR: Panduan Marketer Pilih Strategi Render Website 2026
SSR, SSG, dan ISR bukan istilah teknis untuk developer saja. Pilihan render menentukan kecepatan, biaya server, dan kemampuan website Anda menjawab pencarian organik.
Website Bisnis
Mobile-First Indexing untuk UMKM: Checklist Praktis 2026
Sejak 2023 Google sepenuhnya menggunakan mobile-first indexing. Checklist konkret untuk UMKM Indonesia memastikan versi mobile siap jadi sumber utama Google.
Website Bisnis
Crawl Budget Website Besar: Cara Mengelola untuk Bisnis Indonesia 2026
Crawl budget menentukan berapa banyak halaman website besar yang sempat dijelajahi Google setiap hari. Panduan praktis mengelolanya tanpa over-engineering.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang