🖥

Nuxt3 – useFetch で 固定の key を指定してもほとんどキャッシュしてくれない件

2023/09/01に公開

環境

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 には ファイルと行数が自動で使われる という挙動になっていると思われます。

https://zenn.dev/ytr0903/articles/6acccb5fa816ee

image.png

https://techblog.sakurug.co.jp/article/nuxt3rc-usefetch/

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-08-12

Discussion