SSE로 AI 메시지 스트리밍 구현, WebSocket 없이 HTTP만으로 해결함

Context

ChatGPT, Claude 같은 AI 서비스에서 메시지가 실시간으로 한 조각씩 표시되는 기능이 궁금함. 전통적인 HTTP는 요청-응답 쌍 구조라 서버가 데이터를 여러 번 보낼 수 없음. WebSocket은 양방향 채널이라 과도하고 로드밸런서 Sticky Session 문제로 수평 확장이 어려움.

Technical Solution

• Server-Sent Events: Content-Length 없이 Transfer-Encoding을 chunked로 설정하여 브라우저가 연결을 유지하고 데이터 도착 시마다 처리함
• ReadableStream API: 데이터를 청크 단위로 읽고 전송하는 스트림 객체로 Response에 포함하여 반환함
• SSE 포맷: data: 필드에 JSON 문자열을 담아 두 개의 개행으로 메시지 경계를 나타냄
• Cache-Control: no-cache 헤더로 프록시 캐싱을 방지하여 실시간 전송을 보장함
• Next.js Route Handler: app/api/route.ts 파일에 GET 핸들러를 구현하여 ReadableStream을 Response에 담아 반환함

Impact

DevTools EventStream 탭에서 토큰이 100ms 간격으로 순차 수신됨을 확인함. 별도 WebSocket 서버 없이 표준 HTTP 프로토콜만으로 AI 메시지 스트리밍이 가능함.

Key Takeaway

SSE는 HTTP의 chunked transfer 인코딩을 활용하여 단방향 스트리밍을 구현함. 별도의 프로토콜 전환 없이 기존 HTTP 인프라를 그대로 활용할 수 있어 운영 복잡도가 낮음.