From 0f8740636d4141d08e0a884f9e3926f6d1b3c48e Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@outlook.fr>
Date: Tue, 24 Dec 2024 15:25:09 +0100
Subject: [PATCH] fix(nuxt): treat client useAsyncData calls as async
 boundaries (#30343)

---
 packages/nuxt/src/app/composables/asyncData.ts |  6 ++++++
 test/basic.test.ts                             |  5 +++++
 .../basic/pages/useAsyncData/use-id.vue        | 18 ++++++++++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 test/fixtures/basic/pages/useAsyncData/use-id.vue

diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts
index 29193a0616..1512786b54 100644
--- a/packages/nuxt/src/app/composables/asyncData.ts
+++ b/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`)
diff --git a/test/basic.test.ts b/test/basic.test.ts
index c8be67cf11..50a36b2a27 100644
--- a/test/basic.test.ts
+++ b/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', () => {
diff --git a/test/fixtures/basic/pages/useAsyncData/use-id.vue b/test/fixtures/basic/pages/useAsyncData/use-id.vue
new file mode 100644
index 0000000000..201cea0391
--- /dev/null
+++ b/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>