概要
Nuxt.js製のサイトにNuxtLinkを導入したら、CMSからuseFetchしてきているコンポーネントへの遷移時に問題が発生したので忘れないように記事に残す。
前提
- Nuxt3
- SSR構成
どんなバグか？
記事リストをCMSから取得してくる場合、
下記のように該当するurlやidで一意にページを選択して取得できている状態が期待される。
しかし、NuxtLinkを導入後、同様のフローを試してみると下記のような挙動になってしまった。
考えられる原因
NuxtLinkのおかげでページをロードせずに内部遷移できるようになったが、それによりuseFetchのキャッシュの扱いが変わった（というか正しく動くようになった）
useFetchは前回の実行のキャッシュを保存するため、同じコンポーネントからのフェッチが再度行われた際に同じデータを取ってくれば良いと考えるようになりキャッシュからデータを取得し、今回の事象が発生したと思われる。
どう直したか？
下記のようにurlをkeyとして追加した。
調べるとuseAsyncDataを利用して、initialCache: falseを付与してそもそもキャッシュをさせないような対応も出てきたが、キャッシュの恩恵は受けたいのでこの方法は使わなかった。
const route = useRoute()
const { url } = route.params
const { data } = await useFetch('/api/newt/getcontents', {
key: url as string, // URLをID代わりに利用してキャッシュがこのURLごとに一意に認識されるように
~~~
})
まとめ
- 初めからaタグを使わずにNuxtLinkを使おう
- 開発当時はNuxt初心者すぎてNuxtLinkの存在を知らなかったので...
- useFetchにkeyを付けよう
- 必要に応じてuseAsyncDataと使い分けよう
- ビルド時のみに起きる問題には気をつけよう