Streams Explained for Web Developers

When you call fetch() and wait for a response, the browser has already been receiving that data in pieces. The Web Streams API gives your JavaScript code access to those pieces as they arrive, instead of waiting for the entire response to land before you can touch it.

That shift — from “wait for everything” to “process as it arrives” — is what streams are about.

Why Loading Everything at Once Is a Problem

The traditional approach to fetching data looks like this:

const response = await fetch('/large-dataset.json')
const data = await response.json()
// Nothing happens until all bytes are downloaded and parsed

For small payloads, this is fine. For a 50MB JSON file or a long-running API response, you’re holding the entire thing in memory before processing a single record. On constrained devices or slow connections, that means sluggish UIs, high memory pressure, and frustrated users.

Streams let you start working with data the moment the first chunk arrives.

The Three Core Primitives of the Web Streams API

The Web Streams API is built around three classes:

• ReadableStream — a source you read data from
• WritableStream — a destination you write data to
• TransformStream — sits in the middle, reading from one side and writing transformed data to the other

Data moves through these streams in chunks — small pieces processed one at a time. A chunk can be a Uint8Array of bytes, a string, or any JavaScript value, depending on the stream.

Fetch Streaming: Reading a Response Incrementally

Most fetch() responses expose their body as a ReadableStream via response.body. This is the most common entry point into JavaScript streams for frontend developers.

async function processLargeResponse(url) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  const decoder = new TextDecoder()

  try {
    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      console.log(decoder.decode(value, { stream: true }))
    }
  } finally {
    reader.releaseLock()
  }
}

reader.read() returns a promise that resolves with { value, done }. When done is true, the stream is finished. This pattern lets you process a multi-megabyte response chunk by chunk, without buffering the whole thing.

Note on streaming request bodies: Passing a ReadableStream as a fetch() request body is possible but has uneven browser support. Streaming responses is the well-supported, practical pattern to reach for today.

Building Data Pipelines with pipeThrough() and pipeTo()

Where streams get genuinely powerful is composition. You can chain a ReadableStream through one or more TransformStream instances and pipe the result into a WritableStream.

fetch('./data.txt').then((response) =>
  response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(new TransformStream({
      transform(chunk, controller) {
        controller.enqueue(chunk.toUpperCase())
      }
    }))
    .pipeTo(new WritableStream({
      write(chunk) {
        document.body.textContent += chunk
      }
    }))
)

This pipeline decodes bytes to text, transforms each chunk to uppercase, then writes it to the DOM — all incrementally, without waiting for the full response.

pipeThrough() connects a ReadableStream to a TransformStream and returns a new ReadableStream. pipeTo() connects a ReadableStream to a WritableStream and returns a promise that resolves when the stream completes.

Backpressure: How Streams Avoid Overload

When a consumer processes data more slowly than a producer generates it, streams apply backpressure — a signal that propagates back through the pipe chain, telling the source to slow down. This happens automatically when you use pipeTo() and pipeThrough(). It’s one of the main reasons to prefer piping over manually reading chunks in a loop.

Built-In Streams Worth Knowing

The browser ships several ready-made stream utilities:

• TextDecoderStream / TextEncoderStream — convert between bytes and strings
• CompressionStream / DecompressionStream — gzip or deflate data on the fly
• Blob.stream() — read any Blob or File as a ReadableStream

Modern Node.js also supports the Web Streams API, so pipelines you build for the browser transfer cleanly to server-side environments.

Conclusion

The Web Streams API gives frontend developers a composable, memory-efficient way to handle data that arrives over time. ReadableStream and TransformStream are the primitives you’ll use most — especially when combined with fetch() for incremental response processing. Start with response.body, reach for pipeThrough() when you need to transform data, and let backpressure handle flow control for you.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.