typescriptadvanced

Streaming API Response

Stream long-running API responses using ReadableStream and TransformStream for real-time data delivery.

typescriptPress ⌘/Ctrl + Shift + C to copy

import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(_request: NextRequest) {
  const encoder = new TextEncoder();

  const stream = new ReadableStream({
    async start(controller) {
      const items = ['Processing...', 'Fetching data...', 'Analyzing...', 'Complete!'];

      for (const item of items) {
        controller.enqueue(
          encoder.encode(`data: ${JSON.stringify({ message: item, timestamp: Date.now() })}\n\n`)
        );
        await new Promise((r) => setTimeout(r, 1000));
      }

      controller.enqueue(encoder.encode('data: [DONE]\n\n'));
      controller.close();
    },
  });

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

// Client usage:
// const res = await fetch('/api/stream');
// const reader = res.body!.getReader();
// const decoder = new TextDecoder();
// while (true) {
//   const { done, value } = await reader.read();
//   if (done) break;
//   console.log(decoder.decode(value));
// }