\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport {fetchCategories, fetchLocations} from '~/services/home';\r\n\r\nconst categoriesRequest = ref({pending: true, error: null, data: null});\r\nconst locationsRequest = ref({pending: true, error: null, data: null});\r\n\r\nconst res = await Promise.all([fetchCategories(), fetchLocations({filter: 0})]);\r\n\r\nif (res[0].error.value || res[1].error.value) {\r\n showError(res[0].error.value || res[1].error.value);\r\n} else {\r\n categoriesRequest.value = res[0];\r\n locationsRequest.value = res[1];\r\n}\r\n\u003C/script>\r\n```\r\n\r\nnow let's see what are `fetchCategories` and `fetchLocations` functions\r\n\r\nservices/home.js\r\n```js\r\nimport {useEnv} from '~/utils/use-env';\r\n\r\nexport const fetchCategories = () => {\r\n const mainApi = useEnv('mainApi');\r\n\r\n return useFetch(\r\n `${mainApi}/homepage/categories`,\r\n {\r\n method: 'POST',\r\n server: true,\r\n }\r\n );\r\n};\r\n\r\nexport const fetchLocations = (payload = {}) => {\r\n const mainApi = useEnv('mainApi');\r\n\r\n return useFetch(\r\n `${mainApi}/homepage/locations`,\r\n {\r\n method: 'POST',\r\n body: payload,\r\n server: true,\r\n }\r\n );\r\n};\r\n```\r\n\r\nand this is the component we used in home page:\r\n\r\ncomponents/home/Index.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"categories-wrapper\">\r\n \u003Cdiv\r\n v-for=\"category in categories\"\r\n :key=\"category.key\"\r\n @click=\"setActiveCategory(category.id)\"\r\n >\r\n {{ category.title }}\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport {fetchLocations} from '~/services/home';\r\n\r\nconst props = defineProps({\r\n categoriesRequest: {type: Object, required: true},\r\n locationsRequest: {type: Object, required: true},\r\n});\r\n\r\nconst categories = computed(() => {\r\n const items = [];\r\n\r\n if (props.categoriesRequest.data) {\r\n items.push(...props.categoriesRequest.data.items);\r\n }\r\n\r\n return [\r\n {\r\n id: 0,\r\n key: 'ALL',\r\n title: 'همه تورها',\r\n },\r\n ...items,\r\n ];\r\n});\r\n\r\nconst currentLocationsRequest = ref(props.locationsRequest);\r\n\r\nconst setActiveCategory = async (categoryId) => {\r\n currentLocationsRequest.value = await fetchLocations({filter: categoryId});\r\n};\r\n\u003C/script>\r\n```\r\n\r\n\r\n### Describe the bug\r\n\r\nwe are expecting `fetchCategories` and `fetchLocations` have been called in server side once and nothing else happens in client side.\r\nand when we click on each category element, `fetchLocations` should be called.\r\n\r\nbut this is not the behavior we actually see.\r\nwe see both function just have been called in client side.\r\nand this happens after upgrading nuxt from `3.0.0` to `3.2.2`.\r\nbefore that it worked fine.\r\nand i have to mention that this behavior happens only in production.\r\nif i change `setActiveCategory` to:\r\n```js\r\nconst setActiveCategory = async (categoryId) => {\r\n console.log(categoryId);\r\n};\r\n```\r\nit works fine again\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3120,3121,3122],{"name":3040,"color":3041},{"name":3060,"color":3061},{"name":3123,"color":3124},"needs reproduction","FBCA04",19292,"useFetch ssr not working when use same function in page setup and click event on an element after upgrade nuxt to 3.2.2 from 3.0.0","2023-04-05T07:47:53Z","https://github.com/nuxt/nuxt/issues/19292",0.6560451,{"description":3131,"labels":3132,"number":3144,"owner":3029,"repository":3029,"state":3050,"title":3145,"updated_at":3146,"url":3147,"score":3148},"### Environment\r\n\r\nNuxi 3.5.0 \r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v16.16.0\r\n- Nuxt Version: 3.5.0\r\n- Nitro Version: 2.4.1\r\n- Package Manager: pnpm@8.6.1\r\n- Builder: vite\r\n- User Config: modules, experimental, css, colorMode, nitro, app, pwa, devtools, gtag, gtm, runtimeConfig\r\n- Runtime Modules: @vueuse/nuxt@10.1.2, @unocss/nuxt@0.51.13, @pinia/nuxt@0.4.11, @nuxtjs/color-mode@3.2.0, @vite-pwa/nuxt@0.0.9, nuxt-gtag@0.5.7, @zadigetvoltaire/nuxt-gtm@0.0.13\r\n- Build Modules: -\r\n------------------------------\r\n\r\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new \r\n\r\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\r\n\r\n👉 Read documentation: https://nuxt.com\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-exbnmd?file=app.vue\r\nApologize for that I can't just expose our product api url to show you about the real case, hope the reproduction is enough to help.\r\n\r\n### Describe the bug\r\n\r\n`const { error } = await useFetch(api)`\r\nNormally `useFetch` and `error` worked perfectly.\r\nBut if the request respond without any message, something went wrong.\r\nIn my case, we setup a proxy for blocking DDoS. \r\nSo if you fetch too many times In a period of time, proxy response http code 429 (means 'too many requests') without error message, then do `console.log(error.value)` it output just like\r\n```\r\n{\r\n fatal: false,\r\n statusCode: 500,\r\n statusMessage: undefined,\r\n unhandled: false, \r\n}\r\n```\r\nAs you can see `statusCode` got overwrited by `500`, Besides including CORS and Timeout disconnect those error without message body show the same result.\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3133,3136,3137,3138,3139,3141],{"name":3134,"color":3135},"good first issue","fbca04",{"name":3040,"color":3041},{"name":3020,"color":3021},{"name":3123,"color":3124},{"name":3140,"color":3124},"🔨 p3-minor",{"name":3142,"color":3143},"closed-by-bot","ededed",22724,"error `statusCode` is provided even if no status code is returned from fetch","2023-09-08T01:47:45Z","https://github.com/nuxt/nuxt/issues/22724",0.6565047,["Reactive",3150],{},["Set"],["ShallowReactive",3153],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fg8Ua4HAleqiMs3wAz6c7KOPK3hSqenVrpRU-sKAJp0s":-1},"/nuxt/nuxt/24334"]