SSR+는 React의 useReducer와 유사한 상태 전이 모델과 HTMX와 같은 HTML-first 전송 방식을 결합합니다. 핵심 원리는 다음과 같습니다.
SSR+의 기본 개념
- 서버 주도 UI: 모든 UI는 서버에서 HTML 조각으로 렌더링되며, 클라이언트는 DOM 패치 및 타이머 관리 등 최소한의 역할만 수행합니다.
- 단일 URL 전략:
GET요청으로 페이지를 로드하고,POST요청으로 사용자 상호작용(액션)을 처리하여 상태를 변경하고 업데이트된 HTML 조각을 받습니다. - 상태 공동 배치: 각 UI 컴포넌트(Partial)는
data-partial속성으로 식별되며, 자신의 상태를data-state속성에 JSON 형태로 직접 포함합니다. - 일반화된 액션 핸들러: 클라이언트 측 JavaScript는 모든 Partial 타입과 액션에 대해 작동하는 일반 핸들러를 통해 서버로 액션을 디스패치합니다.
- 점진적 향상: JavaScript 없이도 기본 기능이 작동하며, JavaScript를 통해 더욱 풍부한 사용자 경험을 제공합니다.
실제 적용 사례: Cimatic 대시보드
Cimatic은 SSR+ 패턴을 프로덕션 대시보드에 적용하여 다음과 같은 이점을 얻었습니다. * 즉각적인 피드백: 버튼 클릭 시 낙관적(optimistic) UI 업데이트를 통해 즉각적인 반응성을 제공합니다. * 백그라운드 작업 복원력: 장시간 실행되는 작업(예: 데이터 가져오기, 계산)이 다른 대시보드 섹션에 영향을 주지 않고 Partial만 독립적으로 업데이트됩니다. * 서버 권한: 모든 비즈니스 로직(필터링, 집계, 작업 오케스트레이션)은 서버(Rust)에서 처리되어 복잡성을 줄입니다. * 상태 격리: 각 Partial은 독립적인 상태를 가지므로, 한 Partial의 오류가 전체 대시보드를 중단시키지 않습니다.
생산성을 위한 확장 전략
SSR+는 단순한 카운터 예제를 넘어 엔터프라이즈급 성능과 안정성을 위해 다양한 고급 기능을 제공합니다.
* 전송 계층: 단순한 POST 요청부터 서버 제어 폴링, 고빈도 업데이트를 위한 WebSockets, 효율적인 액션 배칭까지 다양한 전략을 적용할 수 있습니다.
* 디버깅: 모든 상태 전이가 HTTP를 통해 이루어지므로, mitmproxy와 같은 도구를 사용해 요청을 기록하고 재생함으로써 Redux 스타일의 시간 여행 디버깅이 가능합니다.
* 캐싱: 상태 해싱을 통한 304 Not Modified 응답, 리듀서 출력 캐싱, 최소한의 HTML 차등 전송(incremental updates) 등으로 성능을 최적화합니다.
* DOM 최적화: idiomorph와 같은 라이브러리를 사용하여 단순한 HTML 교체 대신 DOM 노드만 변경하여 포커스 유지, 스크롤 위치 보존, CSS 전환 등을 지원합니다.
* 오류 복원력: Partial 오류 격리, 지수 백오프를 통한 자동 재시도, 낙관적 업데이트 후 서버 응답과의 조정 등을 통해 우아한 오류 처리 및 복구를 구현합니다.
SPA 대비 이점
- 간단한 상태 관리: 클라이언트 측 상태 저장소가 없어 동기화 및 디버깅 복잡성이 줄어듭니다.
- 쉬운 테스트: 서버 리듀서와 HTML 렌더링을 독립적으로 테스트할 수 있습니다.
- 예측 가능한 성능: 서버가 복잡성을 제어하며, 네트워크 지연이 주요 변수입니다.