FHWトップへ
東京のホームページ制作・Web制作会社のフライング・ハイ・ワークスがお届けするWEBメディア
2025.08.28 ホームページ制作

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

ホームページ制作のお問い合わせ、お見積り依頼、相談、質問は
お問い合わせフォームよりお願いいたします

ホームページ制作実績 東京のホームページ制作会社 フライング・ハイ・ワークス TOPへ

こちらの記事もおすすめです

フォームの入力制限・指定について
2017.06.09 ホームページ制作

フォームの入力制限・指定について

【Dreamweaver】「検索置換」機能を開くと強制終了してしまう・・・解決方法
2017.09.28 ホームページ制作

【Dreamweaver】「検索置換」機能を開くと強制終了してしまう・・・解決方法

可変SVG利用時の問題と解決方法
2017.03.17 ホームページ制作

可変SVG利用時の問題と解決方法

未経験からフロントエンドエンジニアになろう
2017.11.14 ホームページ制作

未経験からフロントエンドエンジニアになろう

こんなお困りごとは
ございませんか？

フライング・ハイ・ワークスの
サービス一覧
お問い合わせ お問い合わせ
ページの先頭に戻る