Streams Explicados para Desenvolvedores Web

Quando você chama fetch() e aguarda uma resposta, o navegador já está recebendo esses dados em pedaços. A Web Streams API dá ao seu código JavaScript acesso a esses pedaços conforme eles chegam, em vez de esperar que a resposta inteira seja carregada antes de você poder tocá-la.

Essa mudança — de “esperar por tudo” para “processar conforme chega” — é do que se tratam os streams.

Por Que Carregar Tudo de Uma Vez É um Problema

A abordagem tradicional para buscar dados se parece com isto:

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

Para payloads pequenos, isso funciona bem. Para um arquivo JSON de 50MB ou uma resposta de API de longa duração, você está mantendo a coisa toda na memória antes de processar um único registro. Em dispositivos com recursos limitados ou conexões lentas, isso significa interfaces lentas, alta pressão de memória e usuários frustrados.

Streams permitem que você comece a trabalhar com dados no momento em que o primeiro pedaço chega.

Os Três Primitivos Principais da Web Streams API

A Web Streams API é construída em torno de três classes:

• ReadableStream — uma fonte de onde você lê dados
• WritableStream — um destino para onde você escreve dados
• TransformStream — fica no meio, lendo de um lado e escrevendo dados transformados para o outro

Os dados se movem através desses streams em chunks — pequenos pedaços processados um de cada vez. Um chunk pode ser um Uint8Array de bytes, uma string ou qualquer valor JavaScript, dependendo do stream.

Fetch Streaming: Lendo uma Resposta Incrementalmente

A maioria das respostas fetch() expõe seu corpo como um ReadableStream via response.body. Este é o ponto de entrada mais comum para streams JavaScript para desenvolvedores frontend.

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() retorna uma promise que resolve com { value, done }. Quando done é true, o stream terminou. Esse padrão permite processar uma resposta de vários megabytes pedaço por pedaço, sem armazenar tudo em buffer.

Nota sobre streaming de corpos de requisição: Passar um ReadableStream como corpo de requisição do fetch() é possível, mas tem suporte irregular nos navegadores. Streaming de respostas é o padrão bem suportado e prático para usar hoje.

Construindo Pipelines de Dados com pipeThrough() e pipeTo()

Onde os streams se tornam genuinamente poderosos é na composição. Você pode encadear um ReadableStream através de uma ou mais instâncias de TransformStream e canalizar o resultado para um 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
      }
    }))
)

Este pipeline decodifica bytes para texto, transforma cada chunk para maiúsculas, depois escreve no DOM — tudo incrementalmente, sem esperar pela resposta completa.

pipeThrough() conecta um ReadableStream a um TransformStream e retorna um novo ReadableStream. pipeTo() conecta um ReadableStream a um WritableStream e retorna uma promise que resolve quando o stream é concluído.

Backpressure: Como os Streams Evitam Sobrecarga

Quando um consumidor processa dados mais lentamente do que um produtor os gera, os streams aplicam backpressure — um sinal que se propaga de volta através da cadeia de pipes, dizendo à fonte para desacelerar. Isso acontece automaticamente quando você usa pipeTo() e pipeThrough(). É uma das principais razões para preferir piping em vez de ler chunks manualmente em um loop.

Streams Integrados que Vale a Pena Conhecer

O navegador vem com várias utilidades de stream prontas:

• TextDecoderStream / TextEncoderStream — convertem entre bytes e strings
• CompressionStream / DecompressionStream — comprimem ou descomprimem dados em gzip ou deflate em tempo real
• Blob.stream() — lê qualquer Blob ou File como um ReadableStream

O Node.js moderno também suporta a Web Streams API, então os pipelines que você constrói para o navegador transferem facilmente para ambientes server-side.

Conclusão

A Web Streams API oferece aos desenvolvedores frontend uma maneira combinável e eficiente em memória de lidar com dados que chegam ao longo do tempo. ReadableStream e TransformStream são os primitivos que você mais usará — especialmente quando combinados com fetch() para processamento incremental de respostas. Comece com response.body, use pipeThrough() quando precisar transformar dados, e deixe o backpressure cuidar do controle de fluxo para você.

Perguntas Frequentes

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.