🖥
(未解決) Nuxt3 – useFetch に ランダムなkeyを指定すると2回重複して GET リクエストしてしまう (SSR)
バージョン
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オープンチャットもご利用ください。
公開日時
2023-08-12
Discussion