Datastar는 서버가 보낸 HTML·신호 패치를 SSE로 화면에 반영합니다

Datastar는 HTML의 data-* 속성으로 브라우저 상호작용을 선언하고, 서버가 애플리케이션 상태를 처리해 보낸 HTML·신호 패치를 화면에 반영하는 웹 프레임워크입니다. 독립 소프트웨어 개발자 샤론 로즈너는 2026년 11월 4일 Noteflakes에 올린 글에서 Datastar를 살펴보고 Instabooks 데모의 화면 갱신 흐름을 관찰했습니다. 이 방식은 브라우저에 앱별 렌더링 로직을 많이 두지 않고 서버 템플릿에서 UI를 만들도록 설계됐습니다.

로즈너의 시계 예제에서 페이지는 data-init 속성의 @get 동작으로 서버의 SSE 스트림을 엽니다. 서버는 처음 값을 보내고 이후 초마다 현재 시각을 JSON 신호 패치로 전달합니다. HTML의 data-text 속성은 그 신호를 화면에 연결합니다. Datastar 라이브러리가 이벤트를 받아 화면을 갱신하므로, 이 예제에서는 개발자가 직접 EventSource 연결이나 DOM 탐색·수정 코드를 작성하지 않습니다.

SSE는 서버에서 브라우저로 이벤트를 보내는 단방향 스트림입니다. 클릭이나 입력에 따른 요청은 HTML의 @get, @post 동작이 별도의 일반 HTTP 요청으로 시작합니다. Datastar 문서는 업데이트를 받는 장기 SSE 요청과 변경 명령을 보내는 여러 단기 요청을 분리하는 CQRS 구성을 설명합니다.

서버가 화면을 바꾸는 방법은 신호 패치와 HTML 요소 패치입니다. 신호 패치는 JSON 값으로 브라우저의 신호를 갱신합니다. 요소 패치는 서버 템플릿이 만든 HTML을 보내 기존 DOM의 식별된 요소를 갱신합니다. DOM morphing은 수정된 부분을 반영하므로, 서버가 큰 HTML 조각을 보내도 페이지 상태를 유지하면서 바뀐 부분을 갱신할 수 있습니다. 로즈너의 다른 시계 예제에서는 id가 있는 요소를 서버 템플릿으로 다시 만들어 요소 패치로 보냅니다.

Datastar 문서는 백엔드를 애플리케이션 상태의 기준으로 두고 신호는 메뉴 표시 전환이나 폼 입력처럼 사용자 상호작용에 주로 쓰도록 권합니다. 기본 설정에서는 밑줄로 시작하지 않는 신호가 모든 백엔드 요청에 포함되고, 밑줄로 시작하는 로컬 신호는 전송되지 않습니다. 이 구성은 브라우저 신호를 필요한 입력과 상호작용에 활용하고, 애플리케이션의 기준 상태를 서버에 두는 방식입니다.

로즈너는 QuickBooks용 웹 UI인 Instabooks의 공개 데모를 살펴봤습니다. 데이비드 놀런은 대담에서 레코드 탐색·검색·필터링 등 사용자 동작에 따라 페이지 전체를 다시 렌더링한다고 설명했습니다. 로즈너는 데모의 SSE 스트림에서 완전히 렌더링된 HTML이 전달되는 것을 확인했다고 썼습니다. 열 제목의 필터 버튼을 누르면 서버가 해당 열에 맞춘 대화상자를 포함한 HTML을 다시 보내고, Datastar가 DOM을 갱신합니다. 이 사례에서는 클라이언트가 버튼 동작마다 UI를 구성하기보다 서버가 현재 상태에 맞는 화면을 만듭니다.

Instabooks처럼 매 조작 때마다 전체 화면을 다시 렌더링하면 브라우저의 상호작용 코드는 줄지만, 서버는 조작마다 렌더링과 데이터 처리를 맡습니다. 로즈너는 Rails처럼 상대적으로 무거운 프레임워크를 쓰거나 원격 데이터베이스에서 많은 레코드를 가져오는 앱에서는 부담이 될 수 있다고 지적했습니다. 그는 이런 앱에는 요소 패치와 신호 패치 같은 더 세밀한 업데이트가 적합할 수 있다고 봤습니다. Datastar의 공식 지침은 각 페이지를 하나의 자원으로 다루는 다중 페이지 앱 구조와 브라우저 기본 링크 이동을 권합니다. 서버 중심으로 앱의 상태와 요청 흐름을 구성하려는 경우에 맞는 접근입니다.