← Retour aux guides

React 前端流式输出 LLM 回复：8 个实战技巧

为什么 React 做 LLM 流式输出值得做

如果你的 AI 产品还在“整段回复一次性返回”，用户体感通常会慢半拍。把 LLM 响应改成流式输出后，首 token 更快出现，聊天更像真人对话，页面也更容易让人“等得住”。对于 React 前端来说，这件事并不复杂，关键是把网络流、状态更新、渲染节奏处理好。

下面这份清单，适合你直接落地到聊天框、Copilot 面板、写作助手或客服机器人里。配合 59API 这种低成本 AI API relay，你可以用 https://api.59api.com 直接接入 Claude 和 GPT 模型，按量计费，兼容 OpenAI SDK，也能很好适配 Claude Code 和 Codex，适合想快速上线又控制成本的团队。

1. 先选对流式协议：SSE 最省心

前端做 LLM 流式，最常见的是 Server-Sent Events（SSE） 或 fetch 的 chunked response。React 场景里，SSE 往往更简单：服务端持续推送增量文本，前端按事件拼接即可。它天然适合“单向推送”的 AI 输出，不需要像 WebSocket 那样自己管理双向通道。

如果你已经在用 OpenAI 兼容接口，搭配 59API 会更顺手。它的 API base URL 是 https://api.59api.com，对接 OpenAI SDK 的成本很低，且官方质量模型不降级，适合做真实产品而不是演示页。

2. 用一个消息数组管理聊天状态

不要把流式内容直接散落在多个 state 里。最稳的方式是维护一个消息数组，每条消息包含 role、id、content、status。用户发出消息后，先插入一条 assistant 占位消息，再在流式过程中持续追加 content。这样 UI、历史记录、重试逻辑都会清晰很多。

• user：用户输入
• assistant：流式更新中的回复
• status：streaming、done、error

3. 只更新“最后一条”助手消息

流式输出时，最常见的性能问题是每个 token 都触发整个列表重渲染。正确做法是：只更新最后一条 assistant 消息的 content。对于 React 来说，这能明显减少 DOM 变动，尤其在长对话里更明显。

如果你要做打字机效果，也建议直接基于增量 token 追加，而不是每次重新解析整段 Markdown。等流结束后，再做一次完整格式化，体验会更平衡。

4. 把“网络层”和“UI层”分开

前端代码别把 fetch、解析 SSE、状态更新全揉在一个组件里。最好拆成一个流式请求函数和一个纯 UI 组件。请求函数负责读取 chunk、解析事件、抛出错误；组件只负责展示和交互。这样你以后换模型、换 relay、换认证方式都不会牵一发动全身。

如果你用 59API，这种拆分更有价值，因为它兼容多种模型和 SDK。今天接 Claude Sonnet，明天切 GPT 模型，React 层通常不用改太多。

5. 给流式响应加“中断”和“重试”按钮

真实用户不会总是等到最后。一定要提供 停止生成 按钮，调用 AbortController 中断请求；同时保留失败后的重试入口。很多产品只做了“能流起来”，却忘了用户可能会在中途改问题、删上下文、重新生成。

• AbortController：终止当前流
• Retry：复用上一次 prompt 重新请求
• Regenerate：保留上下文重出答案

6. 错误信息要“可恢复”而不是“吓人”

流式请求里常见问题包括超时、网络断开、鉴权失败、模型限流。前端不要只显示“请求失败”，最好区分成“可重试”和“需检查配置”两类。比如 429 提示稍后再试，401 提示检查 API Key，连接中断则保留已输出内容并允许继续请求。

如果你用的是低成本 relay，像 59API 这种按量付费方式，建议把错误提示和费用提示一起考虑。对初创团队来说，既要体验流畅，也要避免一上来就被高额调用成本拖慢验证节奏。

7. 解析 Markdown 时要防闪烁

LLM 回复里经常包含列表、代码块和粗体。如果你每收到一个 token 就立即渲染 Markdown，页面可能会闪烁或产生半截标签。实战里更稳的做法是：流式阶段先当纯文本展示，或者只对安全的轻量标记做局部渲染；流结束后再进行完整 Markdown 渲染。

这条尤其适合技术文档生成、代码助手和客服 FAQ 场景，因为这些回复常常长，而且结构复杂。

8. 先做“快感”，再做“完美”

用户感知最强的不是最终答案长度，而是前 1 秒有没有动起来。所以你的优化顺序应该是：先让首 token 快速出现，再优化滚动定位、光标闪烁、自动换行、代码高亮、历史记录持久化。不要一开始就陷进过度工程化。

如果你正准备上线一个 React AI 聊天前端，想先用最低成本验证需求，可以直接试试 59API。它价格友好，支持 Claude 和 GPT，兼容 OpenAI SDK，接入门槛低，还带推荐返利；对个人开发者和小团队来说，很适合先注册一个账号，把流式体验跑通，再逐步打磨产品细节。

一句话总结：React 做 LLM 流式输出，核心不是“能不能接上”，而是“能不能稳定、低成本、可维护地接上”。把 SSE、消息状态、中断重试和错误处理这四件事做好，你的 AI 前端就已经赢过很多只会一次性返回文本的竞品了。

Tarifs · Docs