Nuxt3でuseAsyncDataを自動的に再フェッチさせる

環境

• Nuxt3（3.17.4）
• TypeScript
• SSG

課題

動的ページのパンくずリストを各ページのslugなどをキーにしてAPIからデータを取得、それを基に生成するようなやり方で実装していました。これに、「ページ遷移時にちゃんと切り替わってほしい」「SSGビルドした後はAPIリクエストが飛ばないようにしたい」という要件があったのですが、、🥵

const { data: breadCrumbs } = await useAsyncData(
  'breadcrumbs',
  async () => await getBreadCrumbList(),
);

watch(
  () => route.path,
  async ()=> {
    breadCrumbs.value = await getBreadCrumbList();
  },

脳直でルートをwatchしてました。良い子は真似しないでください。
これだと、SSGビルド後もページ遷移時にAPIリクエストが飛んでしまい、よくありません🙄 watchはクライアントサイドで実行されるので当たり前ですよねえ。。。。。

解決策

const { data: breadCrumbs } = await useAsyncData(
  () => `breadcrumbs-${route.fullPath}`,
  () => getBreadCrumbList(),
);

キーを動的にしたことで、ルートが変わると自動的にデータが再取得されるようになりました👏
SSGビルド後はビルド時のキャッシュが使われるため、実行時に新たなAPIリクエストは発生しません🥳

参考

ちゃんと公式のドキュメントに目を通しましょう…（自戒）
https://nuxt.com/docs/3.x/api/composables/use-async-data#reactive-keys