MPAモード 実験的

MPA（マルチページアプリケーション）モードは、コマンドラインからvitepress build --mpaを使用して有効にするか、構成からmpa: trueオプションを使用して有効にすることができます。

MPAモードでは、すべてのページはデフォルトでJavaScriptが含まれていない状態でレンダリングされます。そのため、運用サイトは監査ツールからの最初の訪問のパフォーマンススコアが向上する可能性があります。

ただし、SPAナビゲーションがないため、クロスページリンクではフルページのリロードが発生します。MPAモードでの負荷後のナビゲーションはSPAモードほど高速には感じられません。

また、デフォルトでJSが使用されないということは、基本的にVueをサーバーサイドのテンプレート言語としてのみ使用していることを意味します。ブラウザーにイベントハンドラはアタッチされないので、インタラクティブではなくなります。クライアントサイドのJavaScriptをロードするには、特殊な<script client>タグを使用する必要があります。

<script client>
document.querySelector('h1').addEventListener('click', () => {
  console.log('client side JavaScript!')
})
</script>

# Hello

<script client>はVueの機能ではなく、VitePress独自の機能です。.mdファイルと.vueファイルの両方で動作しますが、MPAモードの場合のみです。すべてのテーマコンポーネントのクライアントスクリプトはバンドルされますが、特定のページのクライアントスクリプトは、そのページ専用に分割されます。

<script client>はVueコンポーネントコードとして評価されないことに注意してください。これはプレーンJavaScriptモジュールとして処理されます。このため、MPAモードは、サイトに最小限のクライアントサイドインタラクティビティが必要な場合にのみ使用してください。