\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_",[2983,2984,2985],{"name":2903,"color":2904},{"name":2923,"color":2924},{"name":2986,"color":2987},"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.65604514,["Reactive",2994],{},["Set"],["ShallowReactive",2997],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fg8Ua4HAleqiMs3wAz6c7KOPK3hSqenVrpRU-sKAJp0s":-1},"/nuxt/nuxt/24334"]