useFetch and useAsyncData loading twice (SSR & Client) when inside a dynamic loaded component

[swissmexxa]

Environment

---

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-5jqx3p?file=pages%2Findex.vue

Reload the index page and see that https://jsonplaceholder.typicode.com/posts is called again on client side although the data is present in the payload data.

Describe the bug

When using useFetch or useAsyncData inside a component which is inserted into the DOM by a dynamic component, useFetch or useAsyncData won't use the data from the payload but calls the API endpoint again on client side which results in two calls to the REST API endpoint (SSR and Client). It should take the data from the payload instead of making another call on client side.

Additional context

This problem is crucial when working with Storyblok CMS as Storyblok mainly works with dynamic components.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-5jqx3p (Open reproduction)

[bitbytebit1]

Can you try setting a key for useFetch?

[danielroe]

Let's track in #18405. (It's an upstream vue bug.)