TypeScript 中流式传输 LLM 响应：SSE、ReadableStream 和 React 19 useChat
来源：dev.to — Jul 20
📋 概述
GDS K S 提供从零到生产的LLM 流式响应全栈教程：Next.js API 路由通过 Server-Sent Events 流式输出、前端用 ReadableStream 手动解析流、再用 Vercel AI SDK 的 useChat Hook 重建同一 UI。核心论点是感知延迟——用户会等 8 秒如果看到光标移动，但不会等 4 秒看空白屏幕。流式传输降低 60-70% 感知延迟。
🔑 核心要点
- 感知延迟定律：用户容忍 8 秒流式响应看到光标移动，无法忍受 4 秒空白屏幕
- Next.js API 路由使用 `streamText` + `toUIMessageStreamResponse` 通过 SSE 流式输出 LLM 响应
- 原生客户端：`ReadableStream` + `TextDecoderStream` 手动逐 token 解析 SSE 事件
- React 19：`useChat` from `ai/react` 提供托管状态、取消、自动重连
- 边界情况全覆盖：背压、取消（AbortController）、部分 JSON 守卫、工具调用片段
💡 金句
用户会等待 8 秒，如果看到光标在动。他们不会等 4 秒看一个空白屏幕。这就是流式传输改变的一切——不是总时间，是感知。
👍 0
👎 0
← 返回 Dev.to 首页