Nuxt Composition APIで作る完全静的サイト

いくつかの非同期処理の静的ジェネレート後の挙動の違い

UseAsync

特徴:アクセス時に非同期処理が呼ばれる。従来のasyncDataに近いメソッド。

UseAsyncのデモ (Mount Kilimanjaro)

UseFetch

特徴:ジェネレート時に非同期処理の結果をpayload.jsとして保存し、生成配信後はAPIが呼ばれない。NuxtのFetchメソッドのComposition API版。$fetch$fetchStateが利用できる

UseFetchのデモ (Denali)

UseStatic

特徴:ジェネレート時に非同期処理の結果をJSONデータとして保存し、生成配信後はAPIが呼ばれない。SSR時でも初回アクセス時に内容が保存されるので2回目以降のアクセスが高速。

UseStaticのデモ (Mount Everest)

比較:AsyncData

AsyncDataのデモ (Aconcagua)

比較:Fetch

Fetchのデモ (Kosciuszko)