← सभी गाइड पर लौटें

React LLM Streaming: Fix Buffering, SSE, and Cleanup

Streaming LLM Responses in React: Start with the Right Architecture

A working streaming chatbot needs more than stream: true. Your backend, HTTP infrastructure, parser, and React state updates must all preserve incremental output. Use this path: React sends a request to your backend; your backend calls the model provider; your backend streams the response back to React.

Keep provider credentials on the server. Never put a 59API key in browser code, including frontend environment variables that get bundled into JavaScript.

What Should the Backend Send?

For an OpenAI-compatible Chat Completions request, provide messages, a supported model ID, and stream: true. Configure your server-side client for 59API at https://api.59api.com, checking the documented versioned endpoint path before constructing requests. Avoid accidentally duplicating /v1.

Choose one downstream format: forward upstream server-sent events, or translate provider events into your own event schema. Do not send plain text while expecting React to parse JSON events.

• Headers: For SSE, return Content-Type: text/event-stream and Cache-Control: no-cache, no-transform.
• Delivery: Write chunks as they arrive rather than collecting the complete answer first.
• Errors: Check upstream status before forwarding a success response. Once streaming starts, report failures through a defined error event.

Why Does the Entire Answer Appear at Once?

First inspect whether the backend calls response.text() or response.json() on the streaming upstream response. Both wait for the complete body. Consume the readable stream or SDK async iterator instead.

Next inspect reverse proxies, compression middleware, and hosting limits. Disable response buffering for the streaming route; with nginx, proxy_buffering off is a common fix. Compression can also delay small writes. Compare arrival times at the backend and browser to identify where buffering begins.

Why Does SSE Parsing Fail Randomly?

Network chunks are not event boundaries. One read may contain half a JSON object, several events, or part of a multibyte character. A parser that splits each individual chunk and immediately runs JSON.parse will eventually fail.

• Read incrementally: Use fetch with a POST body, check response.ok and response.body, then read with response.body.getReader().
• Decode safely: Reuse one TextDecoder and call decode(value, { stream: true }); flush the decoder when reading finishes.
• Buffer events: Retain incomplete input across reads. Recognize blank-line event boundaries and support both LF and CRLF line endings.
• Parse payloads: Combine data lines within each event according to SSE rules. For OpenAI Chat Completions, handle [DONE] before JSON parsing and append choices[0].delta.content when present.

Ignore comments and tolerate events without text, including usage-only chunks. Claude-native streaming and the OpenAI Responses API use different event schemas; their payloads need different handlers. Native EventSource is usually unsuitable for this browser request because it does not provide a POST body or arbitrary authorization headers.

Why Is React Dropping Text or Rendering Too Often?

Use a functional update such as setAnswer(previous => previous + delta). Updating from a captured answer variable can overwrite newer text. For smoother rendering, collect deltas in a ref and publish updates once per animation frame rather than triggering a render for every tiny fragment.

Give each request an identifier. Ignore chunks belonging to an older request after the user starts another prompt. This prevents two responses from merging accidentally.

How Do Stop, Cleanup, and Retries Work?

Create an AbortController for each request, pass its signal to fetch, and abort on Stop or component cleanup. Treat AbortError as cancellation, not a failed model response. Propagate client disconnection to the upstream request where supported; otherwise generation may continue and consume tokens.

Do not blindly retry after displaying partial output: a new generation may repeat or contradict it. Offer an explicit retry that replaces the interrupted assistant message. Show non-success HTTP responses clearly, without exposing upstream credentials or sensitive logs.

Is 59API a Good Fit for a React Chatbot?

59API offers low-cost, pay-as-you-go Claude and GPT access through native, official-quality models without downgrading, plus OpenAI SDK compatibility. Its compatibility with Claude Code and Codex also suits teams using those tools. Compare current model prices and limits against your workload; streaming improves perceived latency, not token cost. If that fits your project, consider signing up for 59API and reviewing its referral rebate terms.

मूल्य · दस्तावेज़