Nuxt3のSSGでpayloadの出力を止める方法

Nuxt3の公式リリースからpayloadの出力が標準になった

Nuxt3はSSR（サーバーサイドレンダリング）やSSG（静的サイト生成）など様々なモードに対応していますが、nuxi generateでアプリを出力する場合（つまりSSG）は、公式リリース版から全てのページでpayloadを出力するようになりました。

payloadを出力することで、サイト内のページ遷移に必要なファイルを事前取得できるため、高速ページングが可能になりますが、ビルドに時間がかかるようになります。

これはNitroがビルド時に全てのページをレンダリングして結果を出力しているからで、単純計算で倍の時間かかります。

自前ホストでビルドをする際などは問題ないですが、CI/CDを使っている場合は、ビルドあたりのランタイムに制限があることがあります。そうした場合は、payload出力を停止した方がビルドが高速化出来ます。

payload出力の停止はnuxt.config.jsから設定出来る

Nuxt3ではpayload出力の停止はnuxt.config.jsから設定します。

export default defineNuxtConfig({
  experimental: {
    payloadExtraction: false
  }
})

これだけでpayloadの出力をしなくなります。

ページ遷移時に遷移先のページのデータを取得しに行くので、ローディングアニメーションなどを入れるなどの工夫は必要になりますが、ビルド時間を削減したい場合は有効な手かと思います。