Three Limits for High-Volume SSE Frontends

01 · Step 1: Put a server between browsers and model credentials

For a team running sustained model workloads, streaming is not just a typing animation. Every open connection consumes resources, every abandoned request can waste budget, and every retry can create another billable generation. Build the interface around three explicit limits: concurrent streams, request duration, and output tokens.

Start with a same-origin backend route. The browser sends its prompt to your server; your server authenticates the user, checks their allowance, and forwards an authorized streaming request upstream. Keep the upstream API key out of browser bundles, local storage, and client-visible error messages.

Quanta fits naturally at this boundary: one pay-as-you-go balance supports workloads across models such as Claude Sonnet 5.5 and Gemini 3.1 Pro. Open a Quanta account, keep its credentials on your server, and make model access a backend policy rather than a frontend secret.

02 · Step 2: Use fetch for authenticated streaming requests

Native EventSource is convenient for subscription-style GET requests, but its browser interface does not support arbitrary authorization headers or a POST body. For a prompt submission that needs both, use fetch and read the response body as a stream. The server can still return server-sent event framing.

Before reading, verify the HTTP status, confirm that a response body exists, and check that the content type is text/event-stream. Handle authentication failures and rate limits as ordinary request errors, not as empty assistant responses.

Your backend should send the appropriate streaming headers and flush events promptly. Configure application servers and reverse proxies to avoid buffering this route. Test the deployed path: a local stream can appear healthy while an intermediary holds the entire response.

03 · Step 3: Parse event boundaries, not network chunks

A network read is not an SSE message. One read can contain several events, half an event, or part of a multibyte character. Decode bytes incrementally with a streaming text decoder, retain unfinished text, and process only complete event boundaries.

• › Recognize valid SSE line endings and the blank line that dispatches an event.
• › Collect multiple data fields into one payload, joining their values with newline characters.
• › Ignore comment lines, which servers may use as heartbeats.
• › Parse JSON only after assembling the complete payload, and recognize terminal markers before attempting JSON parsing.

Prefer a tested SSE parser over a quick split on double newlines. When the connection closes, flush the text decoder, but do not treat an unfinished event as a successful completion. Require the completion signal defined by your application protocol.

04 · Step 4: Normalize model events before updating the screen

Keep provider-specific response shapes behind your backend. Translate upstream output into a small internal vocabulary: text delta, usage update, completion, and error. If you use an OpenAI-compatible chat-completions stream, extract incremental content rather than expecting each chunk to contain a complete message.

In the browser, maintain explicit states for connecting, streaming, completed, cancelled, and failed. Append deltas to a buffer, then update the interface on animation frames or a short batching interval. Rendering every token independently can make a busy page less responsive.

Render incoming text safely. If the interface supports formatted content, sanitize it and account for incomplete formatting while generation is still underway.

05 · Step 5: Enforce three limits and propagate cancellation

Set concurrent-stream limits per user and across the service. Apply an overall deadline and an idle timeout; heartbeats can establish connection activity without representing model progress. Set an upstream output-token limit to bound generation.

Connect the browser's stop button to an AbortController. When the browser disconnects or cancels, the backend should abort its upstream request too. Cancellation can reduce further work, but it does not erase tokens already processed or guarantee an instantaneous billing stop.

06 · Step 6: Measure completion and budget before rollout

Record time to first content, total duration, cancellation rate, incomplete streams, and upstream errors. Capture reported usage separately from visible text length. Quanta meters real tokens, with cache writes and cache reads priced separately, so displayed characters are not a reliable cost estimate.

Test fragmented characters, interrupted connections, slow clients, duplicate submissions, and failures after headers arrive. Do not automatically restart a partially displayed generation: without an explicit resume contract, a retry is a new request. Roll out gradually and verify both interface behavior and token accounting before increasing concurrency.