웹소켓을 통한 HTML: 자바스크립트를 거의 사용하지 않는 실시간 SPA

HTML over WebSockets: 거의 JavaScript 없이 실시간 SPA 만들기 (Andros Fenollosa)

핵심 아이디어

전통적인 SPA는 JS 프레임워크가 뷰를 그리고, API가 JSON을 주고받으며 두 코드베이스가 계약을 맞춰야 한다.
이 글은 그 대신 서버가 이미 렌더링한 HTML을 WebSocket으로 보내고, 클라이언트는 그걸 제자리에 꽂기만 하는 방식(HTML over the wire / hypermedia)을 소개한다.

동작 방식

• 클라이언트의 JS 역할은 렌더링이 아니라 WebSocket 채널 생성 + 받은 HTML 삽입(애니메이션, 이벤트 처리 등 보조 작업 포함).
• 서버가 템플릿 엔진으로 HTML을 만들고 WebSocket으로 전송.
• 채널이 항상 열려 있어서 서버가 클라이언트의 요청 없이도 변경사항을 푸시(broadcast)할 수 있다.

전통적인 흐름(요청 → JSON → 클라이언트 렌더링)과 달리, 렌더링 로직과 상태가 전부에 집중된다.

장점

• 렌더링 엔진이 하나뿐이라 복잡도 감소
• API/계약 불필요
• 상태가 서버에 존재 (htmx처럼 stateless하지 않음)
• DB에 직접 연결
• 진정한 실시간 + broadcast 용이 (채팅, 대시보드, 멀티플레이 등)
• 연결 유지로 handshake/헤더 반복 감소 → 트래픽·지연 감소
• React/Vue 등 무거운 프레임워크 없이 SPA 가능
• 초기 HTML이 서버 렌더링이라 SEO에 유리 (단, 이후 WebSocket 업데이트는 크롤러가 못 봄)
• XSS에 상대적으로 안전 (서버에서 이스케이프된 HTML 전송)

단점

• 서버 리소스 소모 큼 (클라이언트당 프로세스 + 상태 유지). 수평 확장 시 Redis 등 채널 레이어 필요
• 네트워크 지연이 크면 “즉시성”이 떨어짐
• 오프라인 불가 (재연결 설계 필요)
• WebSocket 서버 + LiveView 패턴 학습 곡선

관련 기술 비교

• HTTP: htmx, django-unicorn (요청-응답)
• SSE: Datastar 등 (서버→클라이언트 단방향, 인프라 부담 적음)
• WebSocket: Phoenix LiveView, Django LiveView, Blazor Server, Laravel Livewire+Reverb 등 (양방향 실시간)

SSE는 알림·피드·AI 스트리밍처럼 서버→클라이언트 푸시만 필요할 때 더 가볍고 추천된다. 양방향·저지연이 필요하면 WebSocket이 적합하다.

결론

모든 문제에 대한 만능 해결책은 아니다.
실시간 양방향이 필요하면 WebSocket, 단방향 푸시면 SSE, 단순 요청-응답이면 HTTP(htmx)를 선택하면 된다.
핵심은 JSON 대신 HTML을 보내고, 단일 언어로 유지하며 API·계약·프론트엔드 복잡성을 줄이는 것이다.

글 작성자는 자신이 만든 Django LiveView를 포함해 여러 언어의 구현체들을 표로 정리해 두었다.

출처: https://en.andros.dev/blog/ef4968f5/html-over-websockets-real-time-spas-with-barely-any-javascript/