useAsyncData() called twice on initial request server-side and client side.

[abstract birch]

hi 🙂 I'm quite new to nuxt3 (worked with nuxt2 a lot) and I'm still in learning process for the new composition api. As I understood the useAsyncData() and useLazyAsyncData() are equivalent to the old asyncData() and fetch() from nuxt2. So what I now recognized is that the useAsyncData() is called twice on server and client side for the first request. Thats kinda confusing because everywhere it says that this function is running only on server side for the initial request. Can someone explain why this is happening? This would be quite bad when I want to do API request because then my endpoints are called twice.

const { data, pending } = useAsyncData("count",() => {
console.log("SERVER",process.server) // is called twice. First on server and then client side for initial request
})

[left vessel]

I have the same issue and reading through Github issues for hours. Did you manage to find a solution? My use case involves calling a pinia action to prefetch the initial state.

[left vessel]

I actually found a workaround for my issue. Since a pinia action doesn't return any data, the server-side cache returns undefined, leading to a 2nd call on the client side. I created this wrapper composable:

  await useAsyncData(async () => {
    await action();
    // TODO: create issue that Pinia somehow needs to return a value from the action?
    return Promise.resolve('true');
  });
};```

[abstract birch]

The issue is that u have to return something ins useAsyncData() this is not very good explained in the documentation

await useAsyncData(async () => {
// will run twice
});

await useAsyncData(async () => {
return {} // will run once on server side
});