Real-Time & Streaming 📡

When data changes constantly, push updates instead of polling.

WebSockets 🧦

• Requires custom server (Next.js custom server.js) or separate service (Fastify, Socket.IO, Ably, Pusher Channels).
• Use WebSocket servers for chat, live presence, multiplayer cursors.

Server-Sent Events (SSE) 🌊

• Stream text events from route handlers using ReadableStream.
• Great for incremental logs, AI responses, or progress bars.

export async function GET() {
  return new Response(new ReadableStream({
    start(controller) {
      controller.enqueue('data: hello\n\n');
    },
  }), {
    headers: { 'Content-Type': 'text/event-stream' },
  });
}

Managed Providers 🤝

• Pusher/Ably: publish/subscribe channels, presence, webhooks.
• Firebase/Firestore: realtime DB sync.
• Supabase Realtime: Postgres change feeds.

Live Dashboards 📊

• Combine server components (initial data) with client subscriptions.
• Use useSyncExternalStore or libs like Zustand to push updates.

Collaboration Patterns 🧑‍🤝‍🧑

• Keep server authority for conflict resolution; send operations (CRDT, OT) via WebSockets.
• Persist history for audit.

Analogy: real-time systems are air-traffic control—pilots (clients) receive live instructions instead of repeatedly asking “anything new?”.