静的サイト生成

対応状況: 標準。 VitePress は bun run build で Markdown を静的 HTML に生成します。このページはローカルの型付き comparison.data.ts ローダーを読み、ビルド時に検出した日本語評価ページの情報を描画します。

HTML を先に配信し、必要なら対話性を加える

VitePress は初回訪問時に事前レンダリング済みの静的 HTML を配信し、その後 Vue SPA として hydration します。基本本文は JavaScript なしでも読めますが、ローカル検索、テーマ操作、Vue の Counter、Mermaid、クライアント側ナビゲーションには JavaScript が必要です。公式ドキュメントで mpa: true は明示的に experimental です。既定では 0kb JavaScript を配信しますが、明示的にクライアントスクリプトを有効化しない限り SPA ナビゲーションと Vue のイベントハンドラーを失います。このサンプルではコンポーネントとプラグインによる対話性を示すため、有効にしていません。

ビルド時に得たデータ

日本語の評価ページ数: 15

• asset-placement
• customization
• dark-mode
• docs-directory
• documentation-richness
• gfm
• i18n
• image-optimization
• markdown-extensions
• mdx-mdc
• mermaid
• repo-complexity
• search
• sidebar-generation
• ssg

このデータは .vitepress/comparison.data.ts がローカル Markdown の frontmatter を走査して作ります。外部 API、時刻、乱数、ネットワーク要求を使わないため、同じ入力から決定的に再生成できます。

静的と動的の境界

上の Vue テンプレートはビルド時データをもとに HTML を生成します。Counter のような対話的コンポーネントは、配信後にクライアント側の Vue で動作します。

bun run build の出力は .vitepress/dist/ であり、リポジトリーには追跡しません。