Nuxt3 – useFetch で 固定の key を指定してもほとんどキャッシュしてくれない件
環境
Nuxt 3.6.5
NOTE
SSRまたは非SSR
ssr: true
ssr: false
DEVモードもしくはPRODUCTION モード
dev / start
それぞれ動作を確認したが「ほとんどの場合」でキャッシュしてくれなかった
例1 – script 直下で fetch
- SSRだと複数回リクエストされる(キャッシュが効いていない)
- 非SSRだと1回だけリクエストされる(キャッシュが効いている)
<script setup lang="ts">
await useFetch("https://example.com", { key: "XXX" })
await useFetch("https://example.com", { key: "XXX" })
await useFetch("https://example.com", { key: "XXX" })
</script>
await を外すとどちらのモードでもキャッシュは効かなかった
例2 – ボタンを押して fetch する場合
<script setup lang="ts">
const result = ref([])
async function click() {
const { data } = await useFetch("https://httpbin.org/get", {
key: "XXX",
})
result.value = data
}
</script>
<template>
<div>
<button @click="click">click</button>
</div>
{{ result }}
</template>
SSRでも非SSRでもボタンを押すたびにリクエストされる (キャッシュが効いていない)
DevTool
nuxt dev tool ではまるでキャッシュが効いて1回しかリクエストがおこなわれていないかの用に見えるが、実際にリクエストを受ける側のサーバーでアクセスログを確認するとそうではないことが分かった。
単に DevTool ( v0.3.1 (experimental) )の仕様で同じキーは表示がまとめられてしまうとかいう挙動になっているかもしれない。
<img width="657" alt="image" src="https://github.com/YumaInaura/YumaInaura/assets/13635059/fec66bcb-1239-454f-91a2-24fae1ab5d3d">
経緯
useFetch で key 指定をしないと 同じURLに対して 複数回リクエストが発行されない (キャッシュが効いてしまう) という問題を調べていた。
だがいざ試してみると何故かほとんどの場合でキャッシュを効かせることの方が難しかった。
( 古いバージョンで 3.0.0 stable の動きを試したりもしたのだが )
関連
未検証ですが、おそらく key には ファイルと行数が自動で使われる という挙動になっていると思われます。
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2023-08-12
Discussion