Environment

• Operating System: Linux
• Node Version: v20.19.1
• Nuxt Version: 4.2.1
• CLI Version: 3.30.0
• Nitro Version: 2.12.9
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-zr3gjgmn?file=app%2Fapp.vue
See the dev server log. If there are no messages like this, just reload the preview, so the SSR will be involved. Client side fetch works always (so also Hydratation mismatch error).

Describe the bug

When useAsyncData is used to fetch data in a component and this component is used multiple times on the page, then only few last usages will get the data in the SSR, others will return { data: undefined }.

Additional context

Workaround

It helps to set different key for each instance of the component:

const { data, error } = await useAsyncData('key' + props.id, () =>
  $fetch('https://api.restful-api.dev/objects')
);

Logs

data undefined                                                              14:31:08
data undefined                                                              14:31:08
data undefined                                                              14:31:08
data undefined                                                              14:31:08
data undefined                                                              14:31:08
data undefined                                                              14:31:08
data undefined (repeated 4 times)                                           14:31:08
data [{"id":4,"category":                                                   14:31:08
data [{"id":4,"category":                                                   14:31:08