🔥 SSE untuk Realtime Data & Notification: Solusi Ringan Tanpa Kerumitan WebSocket

Di era aplikasi modern, pengguna menuntut data selalu up-to-date tanpa perlu refresh:
status pesanan berubah otomatis, dashboard server update realtime, pesan dan notifikasi masuk seketika.

Saat berbicara tentang realtime, yang terlintas biasanya WebSocket.
Padahal ada teknologi yang lebih ringan, lebih mudah, dan lebih hemat resource untuk kebanyakan kasus:

SSE — Server-Sent Events

---

📌 Apa itu SSE?

SSE (Server-Sent Events) adalah mekanisme push dari server ke client menggunakan koneksi HTTP standar.

• Client berlangganan ke endpoint SSE

• Server mengirim data setiap ada event baru

• Browser otomatis reconnect saat koneksi terputus

Tidak perlu protokol baru atau setup rumit seperti pada WebSocket.

---

🔁 Aliran Komunikasi SSE

Client → buka koneksi SSE → Server
Server → kirim event realtime → Client
Server → kirim lagi saat ada update → Client

➡ Satu arah: Server → Client
➡ Simpel, efisien, built-in di browser

---

🎯 Kapan SSE adalah pilihan terbaik?

Jika hanya perlu informasi mengalir dari server ke client,
SSE adalah solusi ideal.

---

🧩 Contoh Penggunaan SSE

• 🔔 Notifikasi user (transaksi selesai, chat baru, reply)

• 📈 Dashboard realtime (monitoring CPU, RAM, traffic)

• 🚚 Status order (pesanan diproses → dikirim → diterima)

• 🧪 Progress task (upload render, video encoding)

• 📜 Streaming log (deployment / CI/CD)

Aplikasi terasa hidup, tanpa polling berat tiap 2–3 detik.

---

⚙️ Cara Kerja di Browser

Browser sudah punya API bawaan:

const events = new EventSource("/api/events");

events.onmessage = (event) => {
  console.log("Message: ", event.data);
};

events.onerror = () => {
  console.log("SSE connection lost, retrying...");
};

• Tanpa library tambahan

• Auto reconnect bawaan

• Dukungan luas (kecuali IE bawaan 🥲)

---

🖥️ Contoh Endpoint SSE (Node.js/Hono)

import { Hono } from 'hono';

const app = new Hono();

app.get('/events', (c) => {
  c.header('Content-Type', 'text/event-stream');
  c.header('Cache-Control', 'no-cache');
  c.header('Connection', 'keep-alive');

  const send = (data: any) => {
    c.res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // Simulasi kirim event tiap 5 detik
  const interval = setInterval(() => {
    send({ time: new Date().toISOString() });
  }, 5000);

  return new Response('', {
    headers: c.res.headers,
  });
});

export default app;

Trik paling penting: format event harus valid SSE:

data: {...}\n\n

---

🔐 SSE + Auth + Multi-User Scalability

SSE sangat cocok untuk SaaS:

• Kirim event hanya untuk user tertentu

• Integrasi dengan JWT / HttpOnly Cookie

• Bisa dipadukan dengan Redis Pub/Sub untuk broadcast antar instance

Arsitektur umum:

Database (PostgreSQL) 
       │
   Backend API
   │       │
 REST     SSE
   │       │
React Query + SSE EventSource

---

🚀 Keunggulan Utama SSE

---

⚠️ Keterbatasan SSE

• Satu arah (tidak kirim dari client ke server)

• Tidak optimal untuk ribuan event per detik seperti game/action

• Browser perlu fallback untuk environment spesifik (legacy)

Untuk 90% aplikasi dashboard dan notifikasi → sudah lebih dari cukup.

---

🧠 Kesimpulan

SSE adalah solusi realtime modern yang:

✅ ringan
✅ mudah diimplementasikan
✅ biaya server kecil
✅ cocok untuk notifikasi dan update data dinamis

Tidak semua realtime membutuhkan WebSocket.
Pilih yang lebih sederhana tapi efektif: SSE.