Q62: How do you implement Server-Sent Events (SSE) streaming inside App Router Route Handlers?

Server-Sent Events (SSE) maintain an open HTTP connection to stream real-time text/event updates to client browsers. Implemented in Route Handlers using TransformStream or ReadableStream instances with headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }.

Real-time SSE Route Handler Stream

// app/api/sse/route.js
export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 5; i++) {
        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ time: new Date() })}\n\n`));
        await new Promise(r => setTimeout(r, 1000));
      }
      controller.close();
    }
  });
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    }
  });
}

💡 Enqueuing encoded event lines over an open ReadableStream pushes real-time event updates to client EventSource listeners.

Key Takeaways

Uses ReadableStream pipelines inside Route Handlers.
Requires explicit text/event-stream response headers.

Knowledge Check

Which response header is mandatory when returning a ReadableStream from an SSE Route Handler?

Q62: How do you implement Server-Sent Events (SSE) streaming inside App Router Route Handlers?

STAY UPDATED WITH BYTES!