network · high priority
Server-Sent Events (SSE)
서버에서 클라이언트로 단방향 실시간 스트리밍
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“라디오 방송(SSE) vs 전화(WebSocket)”
SSE는 라디오 방송처럼 서버(방송국)가 일방적으로 데이터를 전송하고, 클라이언트(청취자)는 듣기만 합니다. WebSocket은 전화처럼 양쪽이 모두 말할 수 있습니다. AI 챗봇 답변처럼 서버에서 내용을 흘려보내는 것이라면 라디오(SSE)로 충분합니다.
핵심 개념
SSE 동작 4단계
HTTP 연결 수립
클라이언트(EventSource)가 서버에 HTTP GET 요청을 보냅니다. Accept: text/event-stream 헤더 포함.
text/event-stream 응답
서버가 Content-Type: text/event-stream 헤더와 함께 연결을 유지하며 이벤트를 스트리밍합니다.
EventSource 이벤트 수신
클라이언트 EventSource 객체가 서버 이벤트를 수신하여 onmessage 또는 커스텀 이벤트 핸들러를 호출합니다.
자동 재연결
연결이 끊기면 EventSource가 자동으로 재연결을 시도합니다. Last-Event-ID 헤더로 마지막 수신 이벤트 이후부터 재개합니다.
실무 적용
어떤 상황에서 사용하는가
AI 채팅 서비스에서 LLM 응답을 토큰 단위로 스트리밍하거나, 실시간 알림 시스템 구현
어떻게 적용하는가
Next.js App Router Route Handler에서 ReadableStream으로 text/event-stream을 반환하고, 클라이언트에서 EventSource 또는 fetch + ReadableStream으로 수신합니다.
흔한 실수와 안티패턴
- IE 미지원 - 폴리필(event-source-polyfill) 또는 fetch 기반 구현으로 대체 필요
- HTTP/1.1에서 도메인당 6개 연결 제한으로 여러 SSE 스트림 동시 사용 시 블로킹 발생
- CORS 설정 누락 - EventSource는 CORS를 따르므로 서버에서 적절한 헤더 설정 필요
면접 질문
답변 방향 힌트
방향성, 프로토콜, 자동 재연결 측면에서 비교하세요.
반드시 언급할 키워드
- SSE는 서버→클라이언트 단방향
- HTTP 기반, 추가 프로토콜 불필요
- EventSource가 자동 재연결
- WebSocket은 양방향 TCP 연결
예상 꼬리 질문
- SSE를 Fetch API로도 구현할 수 있나요?