Streaming JSON responses using the Fetch API

async function streamJSONResponse(url, onChunk) {

    const response = await fetch(url);

    if (!response.ok) {

        throw new Error(`HTTP error! status: ${response.status}`);

    }

    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 });

        // Process each line or JSON object

        let boundary;

        while ((boundary = buffer.indexOf("\n")) !== -1) {

            const chunk = buffer.slice(0, boundary).trim();

            buffer = buffer.slice(boundary + 1);

            if (chunk) {

                try {

                    const json = JSON.parse(chunk);

                    onChunk(json); // Pass each JSON object to the callback

                } catch (e) {

                    console.error("Invalid JSON chunk:", chunk);

                }

            }

        }

    }

}

Have you ever wondered how ChatGPT streams its responses like it typing it out? this lies in processing data in chunks, instead of waiting for the entire response to load. This concept isn’t unique to AI tools — streaming JSON responses is a widely-used technique in web development for handling large or real-time data streams efficiently.

Traditionally, when a web application fetches JSON data from an API, it waits until the entire response is received before processing it. This approach can be inefficient, especially when dealing with large datasets or real-time data, as it delays the processing and rendering of the data. For example, imagine fetching live updates from a server that sends a continuous stream of JSON objects. If the application waits for the entire response, it can’t display updates in real time, leading to poor user experience.

Using the Fetch API’s ReadableStream feature, you can process server responses incrementally. This approach handles large datasets or real-time streams efficiently without waiting for the full response.

// Usage: 
streamJSONResponse("https://example.com/stream", (chunk) => {
  console.log("Received chunk:", chunk);
});

Streaming JSON significantly enhance the performance and user experience of web applications. Handling data in chunks helps you build applications that feel faster and more responsive, just like how ChatGPT or other LLM interface behaves. Try out the snippet above in your next project!