Building a Real-Time Dashboard with Server-Sent Events

WebSockets vs Server-Sent Events

WebSockets are bidirectional — great for chat apps. But most dashboards only need server-to-client updates. That's exactly what Server-Sent Events (SSE) provide, with less complexity.

Setting Up SSE in Next.js

// app/api/events/route.ts
export async function GET() {

const stream = new ReadableStream({ start(controller) { const interval = setInterval(() => { const data = JSON.stringify({ visitors: Math.floor(Math.random() * 1000), timestamp: new Date().toISOString(), }) controller.enqueue(encoder.encode(data: ${data}\n\n)) }, 1000)

return () => clearInterval(interval) }, })

return new Response(stream, { headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", }, }) } ```

Client-Side Consumption

"use client"

export function LiveMetrics() { const [data, setData] = useState<MetricData | null>(null)

useEffect(() => { const source = new EventSource("/api/events") source.onmessage = (e) => setData(JSON.parse(e.data)) return () => source.close() }, [])

return <MetricCard value={data?.visitors ?? 0} /> } ```

Production Considerations

• Use a message broker (Redis pub/sub) for multi-instance deployments
• Set appropriate timeouts to prevent resource leaks
• Implement backpressure for high-frequency updates