既存レポートは維持し、改善は自由に：Vikeで実現した静的ページ設計記
(blog.lemonbase.team)レモンベースチームが、既存レポートの成果物を安定して維持しつつ、レポートページを自由に改善するために Vike を導入し、静的ページ（SSG）方式を適用した事例を紹介します。
主な内容
- 既存レポートでは特定時点のデータとUIを固定する必要があったが、クライアントレンダリング（CSR）構造のため、ロジックやデザインを変更すると既存レポートまで影響を受ける問題があった
- さまざまな解決策（モジュールフェデレーション、コンポーネントのバージョン管理など）を検討したが、最終的に 静的ページ（SSG） 生成が最も適した方式だと判断
- 既存のViteベースのプロジェクトに簡単な設定を追加するだけで、Vike によりSSGを適用
- レポート発行時点のデータを含むHTMLファイルをビルドして固定
- 発行前のプレビューではリアルタイムデータの反映を維持
- iframe方式で製品内にレポートを統合し、UXを自然につなげた
- 適用結果:
- 既存レポートは変わらず、新しいレポートは自由に改善可能
- パフォーマンス向上（高速な読み込み）と保守コスト削減
- 大規模な専用インフラなしでも迅速に導入可能
- ただし、Vikeはコミュニティが小さく、リファレンスが不足している点は惜しかった
おすすめの対象
- レポートページをバージョンごとに安定して管理する方法を検討しているチーム
- CSR構造からSSG構造への移行や、混合設計が必要なFE開発者
- Viteベースのプロジェクトに軽量に静的ページ機能を追加したい開発者
まだコメントはありません。