fix(nuxt): fetch non-server rendered islands when hydrating (#25613)

packages/nuxt/src/app/components/nuxt-island.ts

@@ -224,9 +224,9 @@ export default defineComponent({
       watch(props, debounce(() => fetchComponent(), 100), { deep: true })
     }
 
-    if (import.meta.client && !nuxtApp.isHydrating && props.lazy) {
+    if (import.meta.client && !instance.vnode.el && props.lazy) {
       fetchComponent()
-    } else if (import.meta.server || !nuxtApp.isHydrating || !nuxtApp.payload.serverRendered) {
+    } else if (import.meta.server || !instance.vnode.el || !nuxtApp.payload.serverRendered) {
       await fetchComponent()
     } else if (selectiveClient && canLoadClientComponent.value) {
       await loadComponents(props.source, payloads.components)

test/basic.test.ts

@@ -1530,6 +1530,9 @@ describe('server components/islands', () => {
     await page.locator('#show-island').click()
     expect(await page.locator('#island-mounted-client-side').innerHTML()).toContain('Interactive testing slot post SSR')
 
+    // test islands wrapped with client-only
+    expect(await page.locator('#wrapped-client-only').innerHTML()).toContain('Was router enabled')
+
     if (!isWebpack) {
       // test client component interactivity
       expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 12')

test/fixtures/basic/pages/islands.vue

@@ -20,10 +20,14 @@ const count = ref(0)
         name="PureComponent"
         :props="islandProps"
       />
-      <NuxtIsland
-        name="PureComponent"
-        :props="islandProps"
-      />
+      <div id="wrapped-client-only"> 
+        <ClientOnly>
+          <NuxtIsland
+            name="PureComponent"
+            :props="islandProps"
+          />
+        </ClientOnly>
+      </div>
     </div>
     <button
       id="increase-pure-component"