EventSource vs Async Generator - What to Use for LLM Streaming?

When it comes to consuming streaming responses in the browser, especially from Server-Sent Events (SSE), two main approaches emerge:

• Using the native EventSource API
• Using fetch with an async generator to manually parse the stream

Let’s break down the differences and when to use each.

🔁 Quick Comparison

🧠 When to Use What?

✅ Use EventSource if:

• Your server supports only GET-based SSE
• You need auto-reconnect
• You’re building a simple real-time dashboard

const es = new EventSource('/events');
es.onmessage = (e) => console.log(e.data);

✅ Use fetch + async generator if:

• You’re working with LLM APIs that require POST or auth headers
• You want fine-grained control over stream parsing

async function* streamSSE(response) {
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = '';
  
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    
    const lines = buffer.split('\n');
    buffer = lines.pop(); // Incomplete line

    for (const line of lines) {
      if (line.startsWith('data: ')) yield line.slice(6);
    }
  }
}

🔚 Summary