Nextjs Route Handler Streaming Readablestream Sse Custom Response

Definisi

Route Handler (app/api/.../route.ts) bisa mengembalikan Response dengan ReadableStream untuk streaming progresif — baik chunk teks biasa maupun SSE (Server-Sent Events) untuk push realtime ke client.

Kapan dipakai

Pakai streaming saat respons besar/lama (AI token-by-token, log live, progress export) supaya client dapat data sebagian tanpa menunggu selesai. SSE cocok untuk push server→client satu arah.

Cara kerja

Streaming chunk

ts

export async function GET() {
  const stream = new ReadableStream({
    async start(controller) {
      for (const w of ['Halo ', 'dunia']) {
        controller.enqueue(new TextEncoder().encode(w));
        await new Promise(r => setTimeout(r, 200));
      }
      controller.close();
    },
  });
  return new Response(stream);
}

SSE

ts

export async function GET() {
  const stream = new ReadableStream({
    start(c) {
      const id = setInterval(() => c.enqueue(`data: ${Date.now()}\n\n`), 1000);
      // cleanup saat cancel
    },
  });
  return new Response(stream, { headers: { 'Content-Type': 'text/event-stream' } });
}

Struktur alur

Catatan implementasi

• Client baca lewat response.body.getReader() atau EventSource (untuk SSE).
• SSE butuh header text/event-stream; format tiap pesan data: ...\n\n.
• Selalu controller.close() dan bersihkan interval/timeout di cancel() untuk hindari leak.
• Route handler streaming butuh runtime Node (bukan static export).

Kesalahan umum

• Lupa close stream: koneksi menggantung.
• Interval tidak dibersihkan: memory leak di server.
• SSE tanpa header benar: EventSource tidak parse.
• Static export: streaming route tidak jalan di output: export.

Referensi terkait

• Next.js Route Handlers, Server Actions, Caching/Revalidation
• Next.js Streaming, Suspense, Parallel/Intercepting Routes
• React Suspense for Data Libraries, Error Recovery