React SPA에서 HTMX로 전환하여 LCP 3.5s 단축 및 코드량 90% 절감

Why We Switched from React to HTMX in Production: A 200-Site Case Study

Mahmut Gündüzalp2026년 5월 23일7분intermediate

AI 요약

Context

단순 CRUD 중심의 Admin 패널에 React SPA를 적용하여 과도한 Bundle Size와 긴 빌드 시간이라는 비용 발생. 낮은 복잡도의 UI 요구사항 대비 상태 관리 라이브러리 및 Client-side Routing으로 인한 유지보수 오버헤드 심화.

Technical Solution

Server-side Rendering 기반의 HTML Fragment 교체 방식으로 Client-side State 관리 제거
Parallel Routes 전략을 통한 React와 HTMX의 점진적 공존 및 단계적 마이그레이션 수행
서버를 Single Source of Truth로 설정하여 Client-side Validation 로직을 제거하고 서버 검증 결과만 DOM에 반영
hx-trigger와 hx-swap을 활용한 Infinite Scroll 및 Modal 제어를 통해 JS 기반 Virtual DOM 라이브러리 의존성 제거
Implementation Detail 테스트 중심의 Jest/RTL 체계에서 HTML 결과물 검증 중심의 PHP Integration Test 체계로 전환

실천 포인트

- 현재 SPA의 Bundle Size가 비즈니스 가치 대비 너무 큰지 검토 - 고도의 인터랙션이 없는 관리자 페이지의 경우 Server-rendered HTML Fragment 도입 고려 - Big-bang Rewrite 대신 Parallel Routes를 통한 점진적 전환 전략 수립 - Client-side Validation 중복 로직을 서버로 통합하여 데이터 정합성 확보

태그

#HTMX #LCP #CRUD #Server-Side Rendering #SPA

원문 읽기