I'm using a Vue.js app to read text from a server. The server streams small amounts of text with each request. For example, the total request lasts 10 seconds and the server writes 1 word per second to the stream.

I've tried this:

fetch('https://my-streaming-api').then(response => {
const reader = response.body.getReader();

async function readStream() {
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    // Process the chunk here (e.g., display it)
    console.log('Chunk:', value); 
  }
}

readStream();
});

The problem I have is that the read() function will block until the whole request is done, and the returned value will be all the data. I'd like to be able to display each word (in this case) as it comes in. I suspect there is some built-in chunk size or internal buffering going on. Is there any way to control this?