← Voltar aos guias

React LLM Streaming: A Practical Decision Guide

Streaming LLM Responses in React: What to Choose First

Streaming makes an AI interface feel substantially faster because users see tokens as they are generated instead of waiting for a complete answer. In a React frontend, the core decision is not whether to stream, but where the stream should be created and how it reaches the browser. For most production applications, the correct pattern is browser to your backend, then backend to the LLM provider, then a streamed response back to React.

Do not call a paid LLM API directly from a public React bundle. A browser-exposed API key can be copied from developer tools, used by third parties, and create an unbounded billing problem. Your server route should hold the key, authenticate the user, apply rate limits, select the model, and forward only the necessary request data.

Decision 1: Use SSE or a Streaming Fetch Response?

Server-Sent Events (SSE) are a strong default when the assistant only needs to send data to the client. They work well for chat completion chunks, progress events, and final metadata. An HTTP fetch request that returns a readable stream is equally practical, especially when your API route already accepts JSON POST bodies. Both approaches let React append text incrementally.

• Choose SSE when you want named events, automatic event framing, or a long-lived one-way response channel.
• Choose fetch with ReadableStream when your chat endpoint is a normal POST route and you want to parse provider chunks yourself.
• Choose WebSockets only when the product needs bidirectional real-time events, such as interruption controls, collaborative sessions, or live voice state.

For a conventional text chat UI, SSE or streamed fetch is simpler than WebSockets and easier to operate behind common hosting platforms and proxies.

Decision 2: Preserve Provider Streaming Format or Normalize It?

If your backend talks to multiple model vendors, normalize streamed chunks into a small internal event format. For example, your frontend may only need events for text delta, tool-call delta, usage, error, and done. This prevents React components from depending on provider-specific fields and makes model switching less risky.

However, avoid overengineering a translation layer for a single provider. If you use an OpenAI-compatible endpoint, a standard OpenAI SDK streaming flow is often enough. 59API is useful here because its base URL, https://api.59api.com, works with OpenAI SDK-compatible integrations while also providing access to Claude models including Opus, Sonnet, Haiku, and Fable, plus GPT models. That compatibility can reduce migration effort when your application already uses an OpenAI-style client.

Implement the React Stream Carefully

In React, keep the in-progress assistant text in state, but do not create a state update for every tiny network fragment if the model sends many of them quickly. Buffer deltas in a ref and flush them on an animation frame or a short interval. This keeps rendering responsive on long answers.

Create one assistant message before opening the request, then append received deltas to that message by ID. This is more reliable than repeatedly adding new messages. Use an AbortController so a Stop button can cancel the browser request; your server should also stop reading the upstream model stream when the client disconnects.

Handle partial output as a normal state, not an exception. A stream can end because a user stopped generation, the network dropped, a gateway timed out, or the provider returned an error after sending some text. Retain useful partial text, mark the message as interrupted when appropriate, and offer a retry action that includes the prior conversation context.

Cost and Model Selection Matter During Streaming

Streaming improves perceived speed, but it does not automatically lower token cost. Control cost by choosing a model appropriate for each task, setting output limits, and avoiding unnecessary conversation history. A lightweight model can handle classification, title generation, and short help text, while more capable models can be reserved for complex reasoning or code generation.

59API is a practical low-cost relay for teams that want pay-as-you-go access to official-quality Claude and GPT models without changing an OpenAI SDK-based application design. Its model options let you route requests by task and budget instead of sending every streamed request to the most expensive model. Developers evaluating ongoing API spend can also sign up for 59API and review its current pricing and referral rebate terms before deploying.

Production Checklist

• Keep provider API keys on the server, never in React environment variables exposed to the browser.
• Authenticate users and enforce per-user rate limits before starting an upstream stream.
• Use SSE or a readable fetch stream for ordinary one-way chat output.
• Append deltas to one stable assistant message and throttle UI updates when necessary.
• Support cancellation with AbortController and clean up upstream connections.
• Send structured error and completion events, including usage when available.
• Set model-specific output limits and route simple tasks to lower-cost models.
• Test slow networks, cancelled requests, malformed chunks, and reconnect or retry behavior.

The best implementation is usually a small server proxy, a predictable event format, and a React message state model built for incomplete output. Start with that foundation, then add tools, citations, and multi-model routing once the basic stream is reliable.

Preços · Docs