Zenn
🖥

(未解決) Nuxt3 – useFetch に ランダムなkeyを指定すると2回重複して GET リクエストしてしまう (SSR)

2023/09/01に公開
tech

バージョン

Nuxt 3.6.5

NOTE

  • SSRでscript直下に書くと2回評価されるとかそれ系かもしれない

例

<script setup lang="ts">
const randomKey = Math.floor(Math.random() * 9999999999999999999999).toString()
await useFetch("https://example.com/", { key: randomKey })
</script>

dev tool の結果

<img width="1435" alt="image" src="https://github.com/YumaInaura/YumaInaura/assets/13635059/19d65001-87e9-4636-b1e9-3ac13bd0ab11">

リクエスト先をログの取れるlocalサーバーにしても確かに2回リクエストされているようだったのでdev Tool の問題ではなさそう

挙動

  • SSRで起きる
  • CSR ( SPA ) では起きない

nuxt config の例

export default defineNuxtConfig({
  ssr: true,
  devtools: { enabled: true },
});

ボタンを押した時の挙動にした場合

ボタンを1回押すごとに1回リクエストされる

<script setup lang="ts">
function fff() {
  const randomKey = Math.floor(
    Math.random() * 9999999999999999999999
  ).toString()
  useFetch("http://localhost:7001/api/health_check", { key: randomKey })
}
</script>

<template>
  <div>
    <button @click="fff">click</button>
  </div>
</template>

チャットメンバー募集

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

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

Twitter

https://twitter.com/YumaInaura

公開日時

2023-08-12

Discussion