` with `\u003CNuxtPage />`\r\n3. create a file `pages/index.vue`\r\n4. create a useAsyncData call:\r\n\r\n```\r\nconst { data, error } = await useAsyncData('test', async () => {\r\n if (process.server) {\r\n console.log('Server: hi');\r\n } else if (process.client) {\r\n console.log('Client: hi');\r\n }\r\n const response = await $fetch('/api/test')\r\n});\r\n```\r\n\r\n5. create a file `server/api/test.get.ts` with this code:\r\n\r\n```\r\nexport default defineEventHandler(async event => {\r\n console.log('test.get.ts hit')\r\n});\r\n```\r\n\r\n6. `npm run dev` and each time you refresh the page, the console log in terminal will show \r\n\r\n```\r\nServer: hi\r\ntest.get.ts hit\r\ntest.get.ts hit\r\n```\r\n\r\nI've tested this on my main project with a api endpoint that adds a row to the database, and it is adding two rows every refresh. \r\n\r\nI think the problem is that useAsyncData is running the full function both on server and client. It should not be re-fetching the data on client.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2965,2966],{"name":2945,"color":2946},{"name":2922,"color":2923},26049,"useAsyncData is running twice refetching data (server and client)","2024-03-03T08:53:17Z","https://github.com/nuxt/nuxt/issues/26049",0.6483056,{"description":2973,"labels":2974,"number":2977,"owner":2925,"repository":2925,"state":2936,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v20.11.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/daniluk4000/nuxt-refresh-data-duplicate\r\n\r\n1. `yarn`\r\n2. `yarn dev`\r\n3. Go to index page\r\n4. Go to second page\r\n5. Go back to index page\r\n6. Watch second page async data to be repeated\r\n7. If you do that many times, you will find many duplicate repeates when coming back to first page\r\n\r\n### Describe the bug\r\n\r\nWhen you use useAsyncData on one page and navigate to another, and then try to use refreshNuxtData, all previous async datas are triggered even when page was already unmounted, which leads to falsey errors and/or duplicate requests.\r\n\r\n### Additional context\r\n\r\nI was like \"HAHA FOUND YA LENNY\" when I got the reason for this. We are facing weird issues in our project and I wasn't able to reproduce it on clear project until I finally got the reason for this.\r\n\r\n### Logs\r\n\r\n_No response_",[2975,2976],{"name":2945,"color":2946},{"name":2922,"color":2923},26820,"useAsyncData is not cleared when using defineNuxtComponent","2024-04-17T12:57:46Z","https://github.com/nuxt/nuxt/issues/26820",0.6558994,{"description":2983,"labels":2984,"number":2986,"owner":2925,"repository":2925,"state":2936,"title":2987,"updated_at":2988,"url":2989,"score":2990},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\n1. Go to this repo: https://stackblitz.com/edit/github-hgj6ru?file=app.vue and notice that on first render, we get an error back because we send a request to a bad url for both useAsyncData and useFetch\r\n2. Click the refresh button and notice that instead of an error, we get back a response in `data`\n\n### Describe the bug\n\nWhy do I get an bad request error when the api composables nuxt provides make the call on the server to a url with no endpoiunt, but then a 200 with a response in `data` on rehydration? Is this expected? How do I get consistent expected output? \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2985],{"name":2922,"color":2923},26741,"api call handling different between ssr and client with useFetch and useAsyncData","2025-06-06T09:39:00Z","https://github.com/nuxt/nuxt/issues/26741",0.6569656,{"description":2992,"labels":2993,"number":2996,"owner":2925,"repository":2925,"state":2936,"title":2997,"updated_at":2998,"url":2999,"score":3000},"### Environment\n\n```\r\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v14.21.1`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@6.14.17`\r\n- Builder: `vite`\r\n- User Config: `modules`, `apollo`, `app`, `css`\r\n- Runtime Modules: `@nuxtjs/apollo@5.0.0-alpha.4`\r\n- Build Modules: `-`\r\n------------------------------\r\n```\n\n### Reproduction\n\n`/pages/test.vue`\r\n```vue\r\n\u003Ctemplate>\r\n \u003CNuxtLink to=\"/testAsync\">GO\u003C/NuxtLink>\r\n\u003C/template>\r\n```\r\n\r\n`/pages/testAsync.vue`\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\n import useTestAsync from '~~/composables/testAsync';\r\n const {data, error} = await useTestAsync();\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>DATA: \"{{ data }}\"\u003C/div>\r\n \u003Cdiv>ERR: \"{{ error }}\"\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n`/composables/testAsync.ts`\r\n```ts\r\nexport default async function useTestAsync() {\r\n return useAsyncData(async () => {\r\n const {data: a} = await useAsyncData\u003Cnumber>('k1', async () => Math.random());\r\n const {data: b} = await useAsyncData\u003Cnumber>('k2', async () => Math.random());\r\n\r\n return ((a.value || -1) + (b.value || -1));\r\n });\r\n}\r\n```\r\n\r\n1. Go to `/test`\r\n2. Click on the \"GO\" link\r\n3. Notice that the \"DATA: \u003Crandom>\" is filled with a random num\r\n4. Refresh the page (to render this page on the server)\r\n5. Notice that the \"DATA\" is empty and the \"ERROR\" says, `\"ERR: \"Error: nuxt instance unavailable\"`\n\n### Describe the bug\n\nThe code above returns an error `Error: nuxt instance unavailable` on the server but works as expected on dynamic navigation to this page on the client.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2994,2995],{"name":2945,"color":2946},{"name":2922,"color":2923},15596,"Nested \"useAsyncData\" fails on SSR and works on the client","2023-04-17T08:39:04Z","https://github.com/nuxt/nuxt/issues/15596",0.66160697,{"description":3002,"labels":3003,"number":3005,"owner":2925,"repository":2925,"state":2936,"title":3006,"updated_at":3007,"url":3008,"score":3009},"### Describe the feature\n\nHello there!\n\nTo implement Server-Side Rendering (SSR) in Nuxt, developers are directed towards either [`useAsyncData`](https://nuxt.com/docs/api/composables/use-async-data) or [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch) to prevent double data fetching. As I understand it, these composables perform two main tasks simultaneously (in addition to their ergonomic benefits):\n\n1. **Fetching the data**\n2. **Preserving the data in the [`SSR Context`](https://nuxt.com/docs/api/composables/use-nuxt-app#ssrcontext)** if the data is fetched on the server.\n\nIn my opinion, this coupled action results in an opinionated way to fetch data. Let me elaborate:\n\n1. Many libraries that would act as an End-point SDK , would do the data fetching themselves, making integration with these composables challenging. They may also require additional headers (e.g., authentication) for valid requests, complicating integration further.\n2. When generating network communication code (via OpenAPI or GraphQL specs), developers must wrap API calls in a `useAsyncData` composable, which can lead to verbosity. This is similar to the previous issue mentioned.\n3. While `useAsyncData` is ergonomic with its options, it does too much and returns excessive data. I simply want to prevent the double data fetching problem without relying on the additional features that `useAsyncData` provides.\n\nFor example:\n\n```ts\n// A generated/third-party library to make API calls\n// const api = useApi()\n\nconst subscriptions = useSubscription();\nconst income = useIncome();\nconst cost = useCosts();\n\nawait Promise.all([\n subscriptions.readSubs(),\n income.readIncome(),\n cost.readCost()\n]);\n```\n\nThis would result in double data fetching. The suggested solution would be to wrap all the data-fetching parts in a `useAsyncData` (including `readSubs` from the `subscriptions` composable, and so on). This forces developers to change the structure of their code wherever they make an API call.\n\nWhat if the internals of `useAsyncData` responsible for preventing double fetches were exposed as another composable? This would allow developers to opt-out of the \"extra\" features of `useAsyncData`.\n\nSomething like `useOnce`, similar to [`callOnce`](https://nuxt.com/docs/api/utils/call-once), but configurable for lazy fetching on the client and server fetching in `onServerPrefetch` or `app:created` (as `useAsyncData` does).\n\nIn that manner, we could restructure the previous code into:\n\n```ts\n// A generated/third-party library to make API calls\n// const api = useApi()\n\nconst subscriptions = useSubscription();\nconst income = useIncome();\nconst cost = useCosts();\n\nuseOnce(() => Promise.all([\n subscriptions.readSubs(),\n income.readIncome(),\n cost.readCost(),\n]));\n```\n\nHere are some assumptions I've made:\n\n1. By not awaiting this composable, we can guarantee data delivery on server requests and, in client-side navigation scenarios, request lazily on the client side (improving developer experience, such as showing a skeleton component).\n2. Composables like `subscriptions` or `income` store their states via `useState`.\n\nSometimes, data must be loaded before the page loads since an intermediate state is not acceptable. We would need a blocking version of this composable that returns data from the callback:\n\n```ts\nconst { posts } = await useBlockingOnce(() => Promise.all([\n api.blog.readPost(),\n]));\n```\n\nIn this case, `posts` does not necessarily need to be reactive, and since this is a blocking version, no loading (intermediate) state is needed.\n\nI've already implemented an incomplete version of these proposed composables, but first, I need to verify that my thought process is valid and that there are currently no other convenient ways to implement these functionalities. I would greatly appreciate any feedback or assistance on this matter! Thank you!\n\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [x] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3004],{"name":2922,"color":2923},29675,"`useOnce` composable: execute data fetching function only once either on server or client","2025-04-10T15:01:52Z","https://github.com/nuxt/nuxt/issues/29675",0.66166514,{"description":3011,"labels":3012,"number":3029,"owner":2925,"repository":2925,"state":2936,"title":3030,"updated_at":3031,"url":3032,"score":3033},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@9.4.2\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nSource:\r\nhttps://stackblitz.com/edit/nuxt-starter-ufrun1?file=pages%2Fadmin.vue\r\n\r\nPreview:\r\nhttps://nuxtstarterufrun1-yc3l--3000--e809191e.local-credentialless.webcontainer.io/admin\r\n\r\nRepro:\r\n1. Open dev tools network tab\r\n2. Open preview link above\r\n3. Note fetch call. It shouldnt be there\r\n4. Click link to index, then link back to admin\r\n5. Note double fetch calls\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nSince v3.6 I am getting client calls from useAsyncData when using custom layout.\r\n\r\nThank you\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3013,3014,3017,3020,3023,3026],{"name":2945,"color":2946},{"name":3015,"color":3016},"bug","d73a4a",{"name":3018,"color":3019},"upstream","E8A36D",{"name":3021,"color":3022},"🔨 p3-minor","FBCA04",{"name":3024,"color":3025},"upstream-bug","B60205",{"name":3027,"color":3028},"suspense","C70109",21999,"custom layout makes useAsyncData run on the client","2023-07-19T06:55:55Z","https://github.com/nuxt/nuxt/issues/21999",0.6618734,["Reactive",3035],{},["Set"],["ShallowReactive",3038],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fr1nU5RYhm5hKzV_f7SaPCH7TKAZNWnexAGz3r_FI_Tk":-1},"/nuxt/nuxt/32443"]