JavaScript Tax 없는 인터랙티브 UI, Razor Pages와 HTMX의 조합

Context

데이터 중심 비즈니스 애플리케이션의 과도한 SPA 도입으로 인한 복잡도 증가. 클라이언트 사이드 프레임워크의 오버헤드로 인한 개발 생산성 저하. 프론트엔드와 백엔드 간의 빈번한 컨텍스트 스위칭 문제.

Technical Solution

• HTML 속성을 통해 AJAX, WebSockets, Server-Sent Events를 직접 제어하는 HTMX 도입
• JSON 파싱과 클라이언트 렌더링 과정을 생략하고 서버에서 직접 HTML Fragment를 반환하는 구조
• Razor Pages의 PageModel을 활용하여 C# 코드 기반의 서버 사이드 Type Safety 유지
• npm install, webpack, vite 등 복잡한 빌드 단계가 없는 zero-build UI 전략
• PartialViewResult를 반환하여 페이지 전체 새로고침 없이 특정 DOM 요소만 업데이트하는 렌더링 방식
• UI 로직을 데이터와 인접한 서버로 이동시켜 프론트엔드-백엔드 간 개발 격차 해소

Key Takeaway

모든 인터랙티브 UI가 무거운 SPA를 필요로 하지 않으며, 서버 중심 렌더링(Server-First)으로도 충분한 사용자 경험과 개발 효율성을 동시에 확보 가능함.