fix(nuxt): treat client useAsyncData calls as async boundaries (#30343)

packages/nuxt/src/app/composables/asyncData.ts

@@ -350,6 +350,12 @@ export function useAsyncData<
   if (import.meta.client) {
     // Setup hook callbacks once per instance
     const instance = getCurrentInstance()
+
+    // @ts-expect-error - instance.sp is an internal vue property
+    if (instance && fetchOnServer && options.immediate && !instance.sp) {
+      // @ts-expect-error - internal vue property. This force vue to mark the component as async boundary client-side to avoid useId hydration issue since we treeshake onServerPrefetch
+      instance.sp = []
+    }
     if (import.meta.dev && !nuxtApp.isHydrating && !nuxtApp._processingMiddleware /* internal flag */ && (!instance || instance?.isMounted)) {
       // @ts-expect-error private property
       console.warn(`[nuxt] [${options._functionName || 'useAsyncData'}] Component is already mounted, please use $fetch instead. See https://nuxt.com/docs/getting-started/data-fetching`)

test/basic.test.ts

@@ -2625,6 +2625,11 @@ describe.skipIf(isWindows)('useAsyncData', () => {
 
     await page.close()
   })
+  it('works with useId', async () => {
+    const html = await $fetch<string>('/useAsyncData/use-id')
+    expect(html).toContain('<div>v-0-0-0</div> v-0-0</div>')
+    await expectNoClientErrors('/useAsyncData/use-id')
+  })
 })
 
 describe.runIf(isDev())('component testing', () => {

test/fixtures/basic/pages/useAsyncData/use-id.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const Child = defineComponent({
+  setup () {
+    const id = useId()
+    return () => h('div', id)
+  },
+})
+
+const id = useId()
+useAsyncData('test', () => Promise.resolve('A'))
+</script>
+
+<template>
+  <div>
+    <Child />
+    {{ id }}
+  </div>
+</template>