기존 리포트는 유지하고, 개선은 자유롭게: Vike로 해결한 정적 페이지 설계기

(blog.lemonbase.team)

레몬베이스 팀이 기존 리포트 결과물을 안정적으로 유지하면서, 리포트 페이지를 자유롭게 개선하기 위해 Vike를 도입해 정적 페이지(SSG) 방식을 적용한 사례를 소개합니다.

기존 리포트는 특정 시점의 데이터와 UI를 고정해야 했으나, 클라이언트 렌더링(CSR) 구조로 인해 로직/디자인 변경 시 기존 리포트까지 영향을 받는 문제가 있었음
다양한 해결책(모듈 페더레이션, 컴포넌트 버전 관리 등)을 검토했지만, 최종적으로 정적 페이지(SSG) 생성이 가장 적합한 방식이라고 판단
기존 Vite 기반 프로젝트 위에 간단한 설정만 추가해, Vike를 통해 SSG를 적용
- 리포트 발행 시점의 데이터를 포함한 HTML 파일을 빌드하여 고정
- 발행 전 미리보기는 실시간 데이터 반영을 유지
iframe 방식으로 제품 내에 리포트를 통합하여 UX를 자연스럽게 연결함
적용 결과:
- 기존 리포트는 변하지 않고, 새 리포트는 자유롭게 개선 가능
- 성능 향상(빠른 로딩)과 유지보수 비용 절감
- 별도의 대규모 인프라 없이 빠르게 도입 가능
단, Vike는 커뮤니티가 작아 레퍼런스가 부족하다는 점은 아쉬웠음