2025년 1월 1일
Next.js에서 WebSocket과 Server-Sent Events(SSE) 다루기
nextjswebsocketssereal-timeapp-router
Next.js는 자체 WebSocket 서버를 제공하지 않지만, 브라우저 표준 API와 Route Handler를 활용하면 WebSocket과 SSE로 충분히 실시간 기능을 구현할 수 있습니다. 이 글은 현실적으로 쓸 수 있는 패턴만 정리합니다.
1Next.js, 런타임, 전송 계층(HTTP, SSE, WebSocket)의 역할을 분리해 설명한다.
2App Router Route Handler에서 ReadableStream으로 SSE 엔드포인트를 구현하는 예시를 제공한다.
3클라이언트 컴포넌트에서 EventSource로 SSE 스트림을 소비하는 방법을 보여준다.
4외부 WebSocket 서버와 연결하는 클라이언트 훅과 간단한 채팅 컴포넌트 예시를 제공한다.
5데이터 흐름과 인프라 제약을 기준으로 SSE와 WebSocket을 선택하는 현실적인 기준을 제시한다.