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

> Clean Markdown view of GeekNews topic #20527. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20527](https://news.hada.io/topic?id=20527)
- GeekNews Markdown: [https://news.hada.io/topic/20527.md](https://news.hada.io/topic/20527.md)
- Type: news
- Author: [foreknowledge](https://news.hada.io/@foreknowledge)
- Published: 2025-04-25T21:02:54+09:00
- Updated: 2025-04-25T21:02:54+09:00
- Original source: [blog.lemonbase.team](https://blog.lemonbase.team/%EA%B8%B0%EC%A1%B4-%EB%A6%AC%ED%8F%AC%ED%8A%B8%EB%8A%94-%EC%9C%A0%EC%A7%80%ED%95%98%EA%B3%A0-%EA%B0%9C%EC%84%A0%EC%9D%80-%EC%9E%90%EC%9C%A0%EB%A1%AD%EA%B2%8C-vike%EB%A1%9C-%ED%95%B4%EA%B2%B0%ED%95%9C-%EC%A0%95%EC%A0%81-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%84%A4%EA%B3%84%EA%B8%B0-5b3a485a4c73)
- Points: 2
- Comments: 0

## Topic Body

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

## Comments



_No public comments on this page._