SSE流累积响应间歇性丢失问题技术求助

针对你遇到的fullResponse局部变量和streamedText状态偶尔为空、无法稳定获取完整累积响应的问题，可从以下几个方向排查修复：

1. 修复React状态更新的异步竞态问题 #

React（Next 15基于React 19）的状态更新是异步的，若直接依赖当前streamedText值进行累加，会因闭包捕获旧状态导致累积丢失。必须使用函数式状态更新确保获取最新状态：

// 错误写法：可能捕获旧的streamedText值
setStreamedText(streamedText + newChunk);

// 正确写法：函数式更新，获取最新的前值
setStreamedText(prevText => prevText + newChunk);

2. 用Ref替代局部变量保存完整响应 #

getStreamedResponse函数若随组件渲染重新创建，内部局部变量fullResponse会被反复初始化，导致累积值丢失。改用useRef存储完整响应，它能跨组件渲染周期保留值：

import { useRef, useState } from 'react';

const ChatComponent = () => {
  const [streamedText, setStreamedText] = useState('');
  const fullResponseRef = useRef(''); // 用Ref持久化完整响应

  const getStreamedResponse = async () => {
    const eventSource = new EventSource('/api/stream');
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      const newChunk = data.content || '';
      
      setStreamedText(prev => prev + newChunk);
      // 更新Ref的完整响应
      fullResponseRef.current += newChunk;
    };

    // 连接关闭时可直接获取完整响应
    eventSource.onclose = () => {
      console.log('完整响应：', fullResponseRef.current);
    };
  };
};

3. 校验SSE事件的完整性 #

流式渲染正常不代表所有事件都携带有效数据：

• 在onmessage回调中打印每个event.data，检查是否存在空JSON、缺失content字段的情况，若后端偶尔推送空数据，需在前端做兜底处理（如跳过空chunk）。
• 检查后端Pub/Sub订阅逻辑，确保响应主题的JSON对象顺序正确、无丢失。

4. 处理SSE连接异常与组件生命周期 #

• 添加onerror回调捕获连接错误，避免异常导致累积过程中断：

eventSource.onerror = (error) => {
  console.error('SSE连接错误：', error);
  eventSource.close();
  // 兜底保存当前累积的响应
  console.log('当前累积响应：', fullResponseRef.current);
};

• 组件卸载时需关闭SSE连接，避免内存泄漏或后续无用的事件触发：

import { useEffect } from 'react';

useEffect(() => {
  const eventSource = new EventSource('/api/stream');
  // ... 绑定onmessage/onerror/onclose回调

  return () => {
    eventSource.close(); // 组件卸载时关闭连接
  };
}, []);

5. 确认组件类型正确 #

Next 15中，SSE流式处理必须在Client Component中进行，若Chat组件是Server Component，状态更新会失效。确保组件顶部添加'use client'标记：

'use client'; // 必须添加，使组件成为客户端组件

import { useState, useRef } from 'react';

export default function ChatComponent() {
  // ... 组件逻辑
}

内容的提问来源于stack exchange，提问作者umz