Streaming Fetch Responses with ReadableStream for Large Payloads

Calling res.json() or res.text() on a large response buffers the entire body in memory before resolving, causing high memory usage and delayed time-to-first-byte for the application.

Read res.body as a ReadableStream and process chunks as they arrive.

async function streamJson(url) {
  const res = await fetch(url);
  const reader = res.body.getReader();
  const decoder = new TextDecoder();
  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    // process buffer incrementally (e.g., NDJSON line splitting)
    const lines = buffer.split('\n');
    buffer = lines.pop(); // keep incomplete last line
    for (const line of lines) {
      if (line) processLine(JSON.parse(line));
    }
  }
}

ReadableStream lets the browser start parsing data before the full download completes. For NDJSON or SSE-style streams this unlocks incremental UI updates with minimal memory overhead.