← Retour aux guides

React LLM Streaming: Fix Blank, Slow, Broken Replies

How should LLM streaming work in React?

Streaming LLM responses in a React frontend lets users read an answer while the model generates it. A reliable setup has three parts: React sends a request to your backend, the backend requests a streaming model response, and the browser progressively renders incoming text.

Keep your API key on the server. Frontend environment variables bundled into JavaScript are visible to visitors. Your backend should authenticate users, enforce usage limits, and forward cancellation upstream.

How do I connect the backend to 59API?

Configure your backend client with the 59API API base URL, https://api.59api.com, and your server-side key. Follow its endpoint configuration when setting any versioned path; SDKs differ in how they append routes. With OpenAI-compatible chat completions, send your model and messages with stream: true.

59API supports OpenAI SDKs and provides low-cost, pay-as-you-go access to native, official-quality models without downgrades. GPT-6 Astra and DeepSeek V4 Flash are concrete options to evaluate against your application's quality, latency, and budget requirements. Compare measured response times and total request costs using representative prompts.

Your backend can either forward the upstream event stream or normalize it into your own event format. Choose one contract and make the React parser match it.

Why does the answer appear all at once?

First, check whether your frontend calls response.json() or response.text(). Both wait for the complete body. For incremental rendering, use fetch(), check response.ok, then read response.body with getReader() inside an asynchronous loop.

Next, inspect your backend. Reading the entire upstream response before returning it defeats streaming. For an SSE response, send Content-Type: text/event-stream and forward chunks as they arrive. Avoid buffering middleware. With Nginx, disable proxy buffering for this route; X-Accel-Buffering: no can help when the proxy honors it.

Test each hop separately. If the backend streams locally but production delivers one large response, inspect your CDN, hosting platform, compression settings, and proxy configuration. A streaming fetch does not require the server to use SSE, but the browser must understand whatever format you send.

Why does JSON parsing fail halfway through?

Network chunks are not complete events. A single reader.read() result might contain half an event or several events together. Decode bytes with TextDecoder using streaming mode, append the decoded text to a buffer, and extract only complete SSE events.

Recognize blank-line event boundaries, including CRLF line endings. Within each event, collect data: lines and join their values with newline characters. Ignore comment lines. Parse JSON only after assembling the event's data. Flush the decoder when reading finishes, and flag an incomplete trailing event instead of silently losing it.

For OpenAI-compatible chat completions, [DONE] is a terminal marker, not JSON. Visible text usually arrives in choices[0].delta.content. Some chunks contain role information, tool-call fragments, or usage data without text, so handle missing choices and content safely. Other APIs use different event schemas.

Why is React dropping text or rendering slowly?

Use a functional state update when appending text: setAnswer(previous => previous + incomingText). Updating from a captured answer variable can overwrite newer chunks. Clear the previous answer when starting a new request, and associate updates with a request ID so an older stream cannot modify a newer conversation.

If frequent updates cause typing lag, accumulate text in a ref and flush it once per animation frame. For expensive Markdown rendering, consider a lower rendering frequency and profile the component. Streaming chunks do not necessarily correspond to individual tokens.

How should Stop, errors, and retries work?

Create an AbortController for each request and pass its signal to fetch(). Abort on Stop and component cleanup; have your backend cancel the upstream request when the client disconnects. Preserve partial output and label it as stopped or interrupted.

Check HTTP status before reading the stream. Handle authentication failures, rate limits, and server errors explicitly. Once streaming headers have been sent, later failures need an application-level error event or an interrupted-stream state. Avoid silently retrying: another generation can duplicate text and incur additional charges.

Does streaming reduce API costs?

Streaming improves perceived responsiveness; it does not inherently reduce token usage. Control output length, trim unnecessary conversation history, and verify cancellation behavior. For an affordable starting point, sign up for 59API and test a small workload; its pay-as-you-go pricing and referral rebate offer additional ways to manage spending.

Tarifs · Docs