# 🔥 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

```typescript
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?

| Kebutuhan | SSE | WebSocket |
| --- | --- | --- |
| Update realtime dari server ke browser | ✔️ | ✔️ |
| Notifikasi user | ✔️ | ✔️ |
| Streaming logs / metrics | ✔️ | ✔️ |
| Chat dua arah | ✘ | ✔️ |
| Game multi-player low-latency | ✘ | ✔️ |
| Butuh dukungan HTTP/2 | ✔️ | ⚠️ kompleks |
| Server lebih hemat resource | ✔️ | ✘ |

> 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:

```js
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)

```ts
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**:

```typescript
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:

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

---

## 🚀 Keunggulan Utama SSE

| Fitur | SSE | WebSocket | Polling |
| --- | --- | --- | --- |
| Push dari server | ✔️ | ✔️ | ✘ |
| Auto reconnect bawaan | ✔️ | ✘ | ✘ |
| Hemat koneksi dan resource | ✔️ | ✘ | ✘ |
| Bisa lewat reverse proxy (Nginx/CDN) | ✔️ | ⚠️ |  |
| Kompatibel HTTP/2 | ✔️ | ⚠️ |  |
| Implementasi sederhana | ✔️ | ✘ |  |

---

## ⚠️ 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**.