feat(nuxt): allow client components within `NuxtIsland` (#22649)

docs/2.guide/2.directory-structure/1.components.md

@@ -295,6 +295,28 @@ Now you can register server-only components with the `.server` suffix and use th
 
 Server-only components use [`<NuxtIsland>`](/docs/api/components/nuxt-island) under the hood, meaning that `lazy` prop and `#fallback` slot are both passed down to it.
 
+#### Client components within server components
+
+::alert{type=info}
+This feature needs `experimental.componentIslands.selectiveClient` within your configuration to be true.
+::
+
+You can partially hydrate a component by setting a `nuxt-client` attribute on the component you wish to be loaded client-side.
+
+```html [components/ServerWithClient.vue]
+<template>
+  <div>
+    <HighlightedMarkdown markdown="# Headline" />
+    <!-- Counter will be loaded and hydrated client-side -->
+    <Counter nuxt-client :count="5" />
+  </div>
+</template>
+```
+
+::alert{type=info}
+This only works within a server component.
+::
+
 #### Server Component Context
 
 When rendering a server-only or island component, `<NuxtIsland>` makes a fetch request which comes back with a `NuxtIslandResponse`. (This is an internal request if rendered on the server, or a request that you can see in the network tab if it's rendering on client-side navigation.)

docs/3.api/1.components/8.nuxt-island.md

@@ -36,9 +36,13 @@ Server only components use `<NuxtIsland>` under the hood
   - **type**: `Record<string, any>`
 - `source`: Remote source to call the island to render.
   - **type**: `string`
+- **dangerouslyLoadClientComponents**: Required to load components from a remote source.
+  - **type**: `boolean`
+  - **default**: `false`
 
 ::callout{color="blue" icon="i-ph-info-duotone"}
 Remote islands need `experimental.componentIslands` to be `'local+remote'` in your `nuxt.config`.
+It is strongly discouraged to enable `dangerouslyLoadClientComponents` as you can't trust a remote server's javascript.
 ::
 
 ## Slots

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

@@ -1,4 +1,5 @@
-import { Fragment, Teleport, computed, createStaticVNode, createVNode, defineComponent, getCurrentInstance, h, nextTick, onMounted, ref, watch } from 'vue'
+import type { Component } from 'vue'
+import { Fragment, Teleport, computed, createStaticVNode, createVNode, defineComponent, getCurrentInstance, h, nextTick, onMounted, ref, toRaw, watch } from 'vue'
 import { debounce } from 'perfect-debounce'
 import { hash } from 'ohash'
 import { appendResponseHeader } from 'h3'
@@ -6,6 +7,7 @@ import { useHead } from '@unhead/vue'
 import { randomUUID } from 'uncrypto'
 import { joinURL, withQuery } from 'ufo'
 import type { FetchResponse } from 'ofetch'
+import { join } from 'pathe'
 
 // eslint-disable-next-line import/no-restricted-paths
 import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
@@ -14,7 +16,7 @@ import { prerenderRoutes, useRequestEvent } from '../composables/ssr'
 import { getFragmentHTML, getSlotProps } from './utils'
 
 // @ts-expect-error virtual file
-import { remoteComponentIslands } from '#build/nuxt.config.mjs'
+import { remoteComponentIslands, selectiveClient } from '#build/nuxt.config.mjs'
 
 const pKey = '_islandPromises'
 const SSR_UID_RE = /nuxt-ssr-component-uid="([^"]*)"/
@@ -25,6 +27,31 @@ const SLOT_FALLBACK_RE = /<div nuxt-slot-fallback-start="([^"]*)"[^>]*><\/div>((
 let id = 0
 const getId = import.meta.client ? () => (id++).toString() : randomUUID
 
+const components = import.meta.client ? new Map<string, Component>() : undefined
+
+async function loadComponents (source = '/', paths: Record<string, string>) {
+  const promises = []
+
+  for (const component in paths) {
+    if (!(components!.has(component))) {
+      promises.push((async () => {
+        const chunkSource = join(source, paths[component])
+        const c = await import(/* @vite-ignore */ chunkSource).then(m => m.default || m)
+        components!.set(component, c)
+      })())
+    }
+  }
+  await Promise.all(promises)
+}
+
+function emptyPayload () {
+  return {
+    chunks: {},
+    props: {},
+    teleports: {}
+  }
+}
+
 export default defineComponent({
   name: 'NuxtIsland',
   props: {
@@ -44,9 +71,15 @@ export default defineComponent({
     source: {
       type: String,
       default: () => undefined
+    },
+    dangerouslyLoadClientComponents: {
+      type: Boolean,
+      default: false
     }
   },
   async setup (props, { slots, expose }) {
+    const key = ref(0)
+    const canLoadClientComponent = computed(() => selectiveClient && (props.dangerouslyLoadClientComponents || !props.source))
     const error = ref<unknown>(null)
     const config = useRuntimeConfig()
     const nuxtApp = useNuxtApp()
@@ -54,6 +87,7 @@ export default defineComponent({
     const hashId = computed(() => hash([props.name, filteredProps.value, props.context, props.source]))
     const instance = getCurrentInstance()!
     const event = useRequestEvent()
+
     // TODO: remove use of `$fetch.raw` when nitro 503 issues on windows dev server are resolved
     const eventFetch = import.meta.server ? event.fetch : import.meta.dev ? $fetch.raw : globalThis.fetch
     const mounted = ref(false)
@@ -65,34 +99,50 @@ export default defineComponent({
           key,
           ...(import.meta.server && import.meta.prerender)
             ? {}
-            : { params: { ...props.context, props: props.props ? JSON.stringify(props.props) : undefined } }
+            : { params: { ...props.context, props: props.props ? JSON.stringify(props.props) : undefined } },
+          result: {
+            chunks: result.chunks,
+            props: result.props,
+            teleports: result.teleports
+          }
         },
         ...result
       }
     }
+    // needs to be non-reactive because we don't want to trigger re-renders
+    // at hydration, we only retrieve props/chunks/teleports from payload. See the reviver at nuxt\src\app\plugins\revive-payload.client.ts
+    // If not hydrating, fetchComponent() will set it
+    const rawPayload = nuxtApp.isHydrating ? toRaw(nuxtApp.payload.data)?.[`${props.name}_${hashId.value}`] ?? emptyPayload() : emptyPayload()
+
+    const nonReactivePayload: Pick<NuxtIslandResponse, 'chunks'| 'props' | 'teleports'> = {
+      chunks: rawPayload.chunks,
+      props: rawPayload.props,
+      teleports: rawPayload.teleports
+    }
 
     const ssrHTML = ref<string>('')
+
     if (import.meta.client) {
-      const renderedHTML = getFragmentHTML(instance.vnode?.el ?? null)?.join('') ?? ''
-      if (renderedHTML && nuxtApp.isHydrating) {
-        setPayload(`${props.name}_${hashId.value}`, {
-          html: getFragmentHTML(instance.vnode?.el ?? null, true)?.join('') ?? '',
-          state: {},
-          head: {
-            link: [],
-            style: []
-          }
-        })
-      }
-      ssrHTML.value = renderedHTML
+      ssrHTML.value = getFragmentHTML(instance.vnode?.el ?? null, true)?.join('') || ''
     }
+
     const slotProps = computed(() => getSlotProps(ssrHTML.value))
     const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId())
     const availableSlots = computed(() => [...ssrHTML.value.matchAll(SLOTNAME_RE)].map(m => m[1]))
 
     const html = computed(() => {
       const currentSlots = Object.keys(slots)
-      return ssrHTML.value.replace(SLOT_FALLBACK_RE, (full, slotName, content) => {
+      let html = ssrHTML.value
+
+      if (import.meta.client && !canLoadClientComponent.value) {
+        for (const [key, value] of Object.entries(nonReactivePayload.teleports || {})) {
+          html = html.replace(new RegExp(`<div [^>]*nuxt-ssr-client="${key}"[^>]*>`), (full) => {
+            return full + value
+          })
+        }
+      }
+
+      return html.replace(SLOT_FALLBACK_RE, (full, slotName, content) => {
         // remove fallback to insert slots
         if (currentSlots.includes(slotName)) {
           return ''
@@ -100,15 +150,18 @@ export default defineComponent({
         return content
       })
     })
+
     function setUid () {
       uid.value = ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId() as string
     }
+
     const cHead = ref<Record<'link' | 'style', Array<Record<string, string>>>>({ link: [], style: [] })
     useHead(cHead)
 
     async function _fetchComponent (force = false) {
       const key = `${props.name}_${hashId.value}`
-      if (nuxtApp.payload.data[key] && !force) { return nuxtApp.payload.data[key] }
+
+      if (nuxtApp.payload.data[key]?.html && !force) { return nuxtApp.payload.data[key] }
 
       const url = remoteComponentIslands && props.source ? new URL(`/__nuxt_island/${key}.json`, props.source).href : `/__nuxt_island/${key}.json`
 
@@ -133,7 +186,7 @@ export default defineComponent({
       setPayload(key, result)
       return result
     }
-    const key = ref(0)
+
     async function fetchComponent (force = false) {
       nuxtApp[pKey] = nuxtApp[pKey] || {}
       if (!nuxtApp[pKey][uid.value]) {
@@ -150,6 +203,16 @@ export default defineComponent({
         })
         key.value++
         error.value = null
+
+        if (selectiveClient && import.meta.client) {
+          if (canLoadClientComponent.value && res.chunks) {
+            await loadComponents(props.source, res.chunks)
+          }
+          nonReactivePayload.props = res.props
+        }
+        nonReactivePayload.teleports = res.teleports
+        nonReactivePayload.chunks = res.chunks
+
         if (import.meta.client) {
           // must await next tick for Teleport to work correctly with static node re-rendering
           await nextTick()
@@ -178,16 +241,19 @@ export default defineComponent({
       fetchComponent()
     } else if (import.meta.server || !nuxtApp.isHydrating || !nuxtApp.payload.serverRendered) {
       await fetchComponent()
+    } else if (selectiveClient && canLoadClientComponent.value && nonReactivePayload.chunks) {
+      await loadComponents(props.source, nonReactivePayload.chunks)
     }
 
     return () => {
-      if ((!html.value || error.value) && slots.fallback) {
-        return [slots.fallback({ error: error.value })]
+      if (!html.value || error.value) {
+        return [slots.fallback?.({ error: error.value }) ?? createVNode('div')]
       }
       const nodes = [createVNode(Fragment, {
         key: key.value
       }, [h(createStaticVNode(html.value || '<div></div>', 1))])]
-      if (uid.value && (mounted.value || nuxtApp.isHydrating || import.meta.server)) {
+
+      if (uid.value && (mounted.value || nuxtApp.isHydrating || import.meta.server) && html.value) {
         for (const slot in slots) {
           if (availableSlots.value.includes(slot)) {
             nodes.push(createVNode(Teleport, { to: import.meta.client ? `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-slot-name='${slot}']` : `uid=${uid.value};slot=${slot}` }, {
@@ -195,6 +261,24 @@ export default defineComponent({
             }))
           }
         }
+        if (import.meta.server) {
+          for (const [id, html] of Object.entries(nonReactivePayload.teleports ?? {})) {
+            nodes.push(createVNode(Teleport, { to: `uid=${uid.value};client=${id}` }, {
+              default: () => [createStaticVNode(html, 1)]
+            }))
+          }
+        }
+        if (selectiveClient && import.meta.client && canLoadClientComponent.value) {
+          for (const [id, props] of Object.entries(nonReactivePayload.props ?? {})) {
+            const component = components!.get(id.split('-')[0])!
+            const vnode = createVNode(Teleport, { to: `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-client="${id}"]` }, {
+              default: () => {
+                return [h(component, props)]
+              }
+            })
+            nodes.push(vnode)
+          }
+        }
       }
       return nodes
     }

packages/nuxt/src/app/components/nuxt-teleport-ssr-client.ts

@@ -0,0 +1,62 @@
+import type { Component,   } from 'vue'
+import { Teleport, defineComponent, h } from 'vue'
+import { useNuxtApp } from '../nuxt'
+// @ts-expect-error virtual file
+import { paths } from '#build/components-chunk'
+
+type ExtendedComponent = Component & {
+  __file: string,
+  __name: string
+}
+
+/**
+ * component only used with componentsIsland
+ * this teleport the component in SSR only if it needs to be hydrated on client
+ */
+export default defineComponent({
+  name: 'NuxtTeleportSsrClient',
+  props: {
+    to: {
+      type: String,
+      required: true
+    },
+    nuxtClient: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * ONLY used in dev mode since we use build:manifest result in production
+     * do not pass any value in production
+     */
+    rootDir: {
+      type: String,
+      default: null
+    }
+  },
+  setup (props, { slots }) {
+    if (!props.nuxtClient) { return () => slots.default!() }
+
+    const app = useNuxtApp()
+    const islandContext = app.ssrContext!.islandContext!
+
+    return () => {
+      const slot = slots.default!()[0]
+      const slotType = (slot.type as ExtendedComponent)
+      const name = (slotType.__name || slotType.name) as string
+     
+      if (import.meta.dev) {
+        const path = '_nuxt/' +  paths[name]
+        islandContext.chunks[name] = path
+      } else {
+        islandContext.chunks[name] = paths[name]
+      }
+
+      islandContext.propsData[props.to] = slot.props || {}
+
+      return [h('div', {
+        style: 'display: contents;',
+        'nuxt-ssr-client': props.to
+      }, []), h(Teleport, { to: props.to }, slot)]
+    }
+  }
+})

packages/nuxt/src/app/plugins/revive-payload.client.ts

@@ -18,7 +18,7 @@ const revivers: Record<string, (data: any) => any> = {
 }
 
 if (componentIslands) {
-  revivers.Island = ({ key, params }: any) => {
+  revivers.Island = ({ key, params, result }: any) => {
     const nuxtApp = useNuxtApp()
     if (!nuxtApp.isHydrating) {
       nuxtApp.payload.data[key] = nuxtApp.payload.data[key] || $fetch(`/__nuxt_island/${key}.json`, {
@@ -29,7 +29,15 @@ if (componentIslands) {
         return r
       })
     }
-    return null
+    return {
+      html: '',
+      state: {},
+      head: {
+        link: [],
+        style: []
+      },
+      ...result
+    }
   }
 }
 

packages/nuxt/src/components/islandsTransform.ts

@@ -1,27 +1,49 @@
 import { pathToFileURL } from 'node:url'
+import { join } from 'node:path'
+import fs from 'node:fs'
 import type { Component } from '@nuxt/schema'
 import { parseURL } from 'ufo'
 import { createUnplugin } from 'unplugin'
 import MagicString from 'magic-string'
 import { ELEMENT_NODE, parse, walk } from 'ultrahtml'
+import { hash } from 'ohash'
+import { resolvePath } from '@nuxt/kit'
 import { isVue } from '../core/utils'
 
 interface ServerOnlyComponentTransformPluginOptions {
     getComponents: () => Component[]
+    /**
+     * passed down to `NuxtTeleportSsrClient`
+     * should be done only in dev mode as we use build:manifest result in production
+     */
+    rootDir?: string
+    isDev?: boolean
+    /**
+     * allow using `nuxt-client` attribute on components
+     */
+    selectiveClient?: boolean
+}
+
+interface ComponentChunkOptions {
+  getComponents: () => Component[]
+  buildDir: string
 }
 
 const SCRIPT_RE = /<script[^>]*>/g
-const HAS_SLOT_RE = /<slot[^>]*>/
+const HAS_SLOT_OR_CLIENT_RE = /(<slot[^>]*>)|(nuxt-client)/
 const TEMPLATE_RE = /<template>([\s\S]*)<\/template>/
+const NUXTCLIENT_ATTR_RE = /\snuxt-client(="[^"]*")?/g
 
-export const islandsTransform = createUnplugin((options: ServerOnlyComponentTransformPluginOptions) => {
+export const islandsTransform = createUnplugin((options: ServerOnlyComponentTransformPluginOptions, meta) => {
+  const isVite = meta.framework === 'vite'
+  const { isDev, rootDir } = options
   return {
     name: 'server-only-component-transform',
     enforce: 'pre',
     transformInclude (id) {
       if (!isVue(id)) { return false }
-
       const components = options.getComponents()
+
       const islands = components.filter(component =>
         component.island || (component.mode === 'server' && !components.some(c => c.pascalName === component.pascalName && c.mode === 'client'))
       )
@@ -29,58 +51,77 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
       return islands.some(c => c.filePath === pathname)
     },
     async transform (code, id) {
-      if (!HAS_SLOT_RE.test(code)) { return }
+      if (!HAS_SLOT_OR_CLIENT_RE.test(code)) { return }
       const template = code.match(TEMPLATE_RE)
       if (!template) { return }
       const startingIndex = template.index || 0
       const s = new MagicString(code)
 
       s.replace(SCRIPT_RE, (full) => {
-        return full + '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\''
+        return full + '\nimport { vforToArray as __vforToArray } from \'#app/components/utils\'' + '\nimport NuxtTeleportSsrClient from \'#app/components/nuxt-teleport-ssr-client\''
       })
 
+      let hasNuxtClient = false
+
       const ast = parse(template[0])
       await walk(ast, (node) => {
-        if (node.type === ELEMENT_NODE && node.name === 'slot') {
-          const { attributes, children, loc, isSelfClosingTag } = node
-          const slotName = attributes.name ?? 'default'
-          let vfor: [string, string] | undefined
-          if (attributes['v-for']) {
-            vfor = attributes['v-for'].split(' in ').map((v: string) => v.trim()) as [string, string]
-            delete attributes['v-for']
-          }
-          if (attributes.name) { delete attributes.name }
-          if (attributes['v-bind']) {
-            attributes._bind = attributes['v-bind']
-            delete attributes['v-bind']
-          }
-          const bindings = getBindings(attributes, vfor)
+        if (node.type === ELEMENT_NODE) {
+          if (node.name === 'slot') {
+            const { attributes, children, loc, isSelfClosingTag } = node
+            const slotName = attributes.name ?? 'default'
+            let vfor: [string, string] | undefined
+            if (attributes['v-for']) {
+              vfor = attributes['v-for'].split(' in ').map((v: string) => v.trim()) as [string, string]
+              delete attributes['v-for']
+            }
+            if (attributes.name) { delete attributes.name }
+            if (attributes['v-bind']) {
+              attributes._bind = attributes['v-bind']
+              delete attributes['v-bind']
+            }
+            const bindings = getBindings(attributes, vfor)
 
-          if (isSelfClosingTag) {
-            s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, `<div style="display: contents;" nuxt-ssr-slot-name="${slotName}" ${bindings}/>`)
-          } else {
-            s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, `<div style="display: contents;" nuxt-ssr-slot-name="${slotName}" ${bindings}>`)
-            s.overwrite(startingIndex + loc[1].start, startingIndex + loc[1].end, '</div>')
+            if (isSelfClosingTag) {
+              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, `<div style="display: contents;" nuxt-ssr-slot-name="${slotName}" ${bindings}/>`)
+            } else {
+              s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, `<div style="display: contents;" nuxt-ssr-slot-name="${slotName}" ${bindings}>`)
+              s.overwrite(startingIndex + loc[1].start, startingIndex + loc[1].end, '</div>')
 
-            if (children.length > 1) {
-              // need to wrap instead of applying v-for on each child
-              const wrapperTag = `<div ${vfor ? `v-for="${vfor[0]} in ${vfor[1]}"` : ''} style="display: contents;">`
-              s.appendRight(startingIndex + loc[0].end, `<div nuxt-slot-fallback-start="${slotName}"/>${wrapperTag}`)
-              s.appendLeft(startingIndex + loc[1].start, '</div><div nuxt-slot-fallback-end/>')
-            } else if (children.length === 1) {
-              if (vfor && children[0].type === ELEMENT_NODE) {
-                const { loc, name, attributes, isSelfClosingTag } = children[0]
-                const attrs = Object.entries(attributes).map(([attr, val]) => `${attr}="${val}"`).join(' ')
-                s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, `<${name} v-for="${vfor[0]} in ${vfor[1]}" ${attrs} ${isSelfClosingTag ? '/' : ''}>`)
+              if (children.length > 1) {
+                // need to wrap instead of applying v-for on each child
+                const wrapperTag = `<div ${vfor ? `v-for="${vfor[0]} in ${vfor[1]}"` : ''} style="display: contents;">`
+                s.appendRight(startingIndex + loc[0].end, `<div nuxt-slot-fallback-start="${slotName}"/>${wrapperTag}`)
+                s.appendLeft(startingIndex + loc[1].start, '</div><div nuxt-slot-fallback-end/>')
+              } else if (children.length === 1) {
+                if (vfor && children[0].type === ELEMENT_NODE) {
+                  const { loc, name, attributes, isSelfClosingTag } = children[0]
+                  const attrs = Object.entries(attributes).map(([attr, val]) => `${attr}="${val}"`).join(' ')
+                  s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, `<${name} v-for="${vfor[0]} in ${vfor[1]}" ${attrs} ${isSelfClosingTag ? '/' : ''}>`)
+                }
+
+                s.appendRight(startingIndex + loc[0].end, `<div nuxt-slot-fallback-start="${slotName}"/>`)
+                s.appendLeft(startingIndex + loc[1].start, '<div nuxt-slot-fallback-end/>')
               }
+            }
+          } else if (options.selectiveClient && ('nuxt-client' in node.attributes || ':nuxt-client' in node.attributes)) {
+            hasNuxtClient = true
+            const attributeValue = node.attributes[':nuxt-client'] || node.attributes['nuxt-client'] || 'true'
+            if (isVite) {
+              // handle granular interactivity
+              const htmlCode = code.slice(startingIndex + node.loc[0].start, startingIndex + node.loc[1].end)
+              const uid = hash(id + node.loc[0].start + node.loc[0].end)
 
-              s.appendRight(startingIndex + loc[0].end, `<div nuxt-slot-fallback-start="${slotName}"/>`)
-              s.appendLeft(startingIndex + loc[1].start, '<div nuxt-slot-fallback-end/>')
+              s.overwrite(startingIndex + node.loc[0].start, startingIndex + node.loc[1].end, `<NuxtTeleportSsrClient to="${node.name}-${uid}" ${rootDir && isDev ? `root-dir="${rootDir}"` : ''} :nuxt-client="${attributeValue}">${htmlCode.replaceAll(NUXTCLIENT_ATTR_RE, '')}</NuxtTeleportSsrClient>`)
             }
           }
         }
       })
 
+      if (!isVite && hasNuxtClient) {
+        // eslint-disable-next-line no-console
+        console.warn(`nuxt-client attribute and client components within islands is only supported with Vite. file: ${id}`)
+      }
+
       if (s.hasChanged()) {
         return {
           code: s.toString(),
@@ -105,3 +146,48 @@ function getBindings (bindings: Record<string, string>, vfor?: [string, string])
     return `:nuxt-ssr-slot-data="JSON.stringify(__vforToArray(${vfor[1]}).map(${vfor[0]} => (${data})))"`
   }
 }
+
+export const componentsChunkPlugin = createUnplugin((options: ComponentChunkOptions) => {
+  const { buildDir } = options
+  return {
+    name: 'componentsChunkPlugin',
+    vite: {
+      async  config (config) {
+        const components = options.getComponents()
+        config.build = config.build || {}
+        config.build.rollupOptions = config.build.rollupOptions || {}
+        config.build.rollupOptions.output = config.build.rollupOptions.output || {}
+        config.build.rollupOptions.input = config.build.rollupOptions.input || {}
+        // don't use 'strict', this would create another "facade" chunk for the entry file, causing the ssr styles to not detect everything
+        config.build.rollupOptions.preserveEntrySignatures = 'allow-extension'
+        for (const component of components) {
+          if (component.mode === 'client' || component.mode === 'all') {
+            (config.build.rollupOptions.input as Record<string, string>)[component.pascalName] = await resolvePath(component.filePath)
+          }
+        }
+      },
+
+      async generateBundle (_opts, bundle) {
+        const components = options.getComponents().filter(c => c.mode === 'client' || c.mode === 'all')
+        const pathAssociation: Record<string, string> = {}
+        for (const [chunkPath, chunkInfo] of Object.entries(bundle)) {
+          if (chunkInfo.type !== 'chunk') { continue }
+
+          for (const component of components) {
+            if (chunkInfo.facadeModuleId && chunkInfo.exports.length > 0) {
+              const { pathname } = parseURL(decodeURIComponent(pathToFileURL(chunkInfo.facadeModuleId).href))
+              const isPath = await resolvePath(component.filePath) === pathname
+              if (isPath) {
+                // avoid importing the component chunk in all pages
+                chunkInfo.isEntry = false
+                pathAssociation[component.pascalName] = chunkPath
+              }
+            }
+          }
+        }
+
+        fs.writeFileSync(join(buildDir, 'components-chunk.mjs'), `export const paths = ${JSON.stringify(pathAssociation, null, 2)}`)
+      }
+    }
+  }
+})

packages/nuxt/src/components/module.ts

@@ -1,5 +1,5 @@
-import { statSync } from 'node:fs'
-import { normalize, relative, resolve } from 'pathe'
+import fs, { statSync } from 'node:fs'
+import { join, normalize, relative, resolve } from 'pathe'
 import { addPluginTemplate, addTemplate, addVitePlugin, addWebpackPlugin, defineNuxtModule, logger, resolveAlias, updateTemplates } from '@nuxt/kit'
 import type { Component, ComponentsDir, ComponentsOptions } from 'nuxt/schema'
 
@@ -9,7 +9,7 @@ import { componentNamesTemplate, componentsIslandsTemplate, componentsPluginTemp
 import { scanComponents } from './scan'
 import { loaderPlugin } from './loader'
 import { TreeShakeTemplatePlugin } from './tree-shake'
-import { islandsTransform } from './islandsTransform'
+import { componentsChunkPlugin, islandsTransform } from './islandsTransform'
 import { createTransformPlugin } from './transform'
 
 const isPureObjectOrString = (val: any) => (!Array.isArray(val) && typeof val === 'object') || typeof val === 'string'
@@ -226,10 +226,35 @@ export default defineNuxtModule<ComponentsOptions>({
         experimentalComponentIslands: !!nuxt.options.experimental.componentIslands
       }))
 
-      if (isServer && nuxt.options.experimental.componentIslands) {
-        config.plugins.push(islandsTransform.vite({
-          getComponents
-        }))
+      if (nuxt.options.experimental.componentIslands) {
+        const selectiveClient = typeof nuxt.options.experimental.componentIslands === 'object' && nuxt.options.experimental.componentIslands.selectiveClient
+
+        if (isClient && selectiveClient) {
+          fs.writeFileSync(join(nuxt.options.buildDir, 'components-chunk.mjs'), 'export const paths = {}')
+          if(!nuxt.options.dev) {
+            config.plugins.push(componentsChunkPlugin.vite({
+              getComponents,
+              buildDir: nuxt.options.buildDir
+            }))
+          } else {
+            fs.writeFileSync(join(nuxt.options.buildDir, 'components-chunk.mjs'),`export const paths = ${JSON.stringify(
+              getComponents().filter(c => c.mode === 'client' || c.mode === 'all').reduce((acc, c) => {
+                if(c.filePath.endsWith('.vue') || c.filePath.endsWith('.js') || c.filePath.endsWith('.ts')) return Object.assign(acc, {[c.pascalName]: `/@fs/${c.filePath}`})
+                const filePath = fs.existsSync( `${c.filePath}.vue`) ? `${c.filePath}.vue` : fs.existsSync( `${c.filePath}.js`) ? `${c.filePath}.js` : `${c.filePath}.ts`
+                return Object.assign(acc, {[c.pascalName]: `/@fs/${filePath}`})
+              }, {} as Record<string, string>)
+            )}`)
+          }         
+        }
+
+        if (isServer) {
+          config.plugins.push(islandsTransform.vite({
+            getComponents,
+            rootDir: nuxt.options.rootDir,
+            isDev: nuxt.options.dev,
+            selectiveClient
+          }))
+        } 
       }
       if (!isServer && nuxt.options.experimental.componentIslands) {
         config.plugins.push({
@@ -270,10 +295,14 @@ export default defineNuxtModule<ComponentsOptions>({
           experimentalComponentIslands: !!nuxt.options.experimental.componentIslands
         }))
 
-        if (nuxt.options.experimental.componentIslands && mode === 'server') {
-          config.plugins.push(islandsTransform.webpack({
-            getComponents
-          }))
+        if (nuxt.options.experimental.componentIslands) {
+          if (mode === 'server') {
+            config.plugins.push(islandsTransform.webpack({
+              getComponents
+            }))
+          } else {
+            fs.writeFileSync(join(nuxt.options.buildDir, 'components-chunk.mjs'), 'export const paths = {}')
+          }
         }
       })
     })

packages/nuxt/src/core/runtime/nitro/renderer.ts

@@ -58,6 +58,10 @@ export interface NuxtIslandContext {
   name: string
   props?: Record<string, any>
   url?: string
+  // chunks to load components
+  chunks: Record<string, string>
+  // props to be sent back
+  propsData: Record<string, any>
 }
 
 export interface NuxtIslandResponse {
@@ -68,6 +72,9 @@ export interface NuxtIslandResponse {
     link: (Record<string, string>)[]
     style: ({ innerHTML: string, key: string })[]
   }
+  chunks?: Record<string, string>
+  props?: Record<string, Record<string, any>>
+  teleports?: Record<string, string>
 }
 
 export interface NuxtRenderResponse {
@@ -188,7 +195,10 @@ async function getIslandContext (event: H3Event): Promise<NuxtIslandContext> {
     id: hashId,
     name: componentName,
     props: destr(context.props) || {},
-    uid: destr(context.uid) || undefined
+    uid: destr(context.uid) || undefined,
+    chunks: {},
+    propsData: {},
+    teleports: {}
   }
 
   return ctx
@@ -406,7 +416,7 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
     head: normalizeChunks([headTags, ssrContext.styles]),
     bodyAttrs: [bodyAttrs],
     bodyPrepend: normalizeChunks([bodyTagsOpen, ssrContext.teleports?.body]),
-    body: [process.env.NUXT_COMPONENT_ISLANDS ? replaceServerOnlyComponentsSlots(ssrContext, _rendered.html) : _rendered.html],
+    body: [process.env.NUXT_COMPONENT_ISLANDS ? replaceClientTeleport(ssrContext, replaceServerOnlyComponentsSlots(ssrContext, _rendered.html)) : _rendered.html],
     bodyAppend: [bodyTags]
   }
 
@@ -431,7 +441,10 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
       id: islandContext.id,
       head: islandHead,
       html: getServerComponentHTML(htmlContext.body),
-      state: ssrContext.payload.state
+      state: ssrContext.payload.state,
+      chunks: islandContext.chunks,
+      props: islandContext.propsData,
+      teleports: ssrContext.teleports || {}
     }
 
     await nitroApp.hooks.callHook('render:island', islandResponse, { event, islandContext })
@@ -577,6 +590,7 @@ function getServerComponentHTML (body: string[]): string {
 }
 
 const SSR_TELEPORT_MARKER = /^uid=([^;]*);slot=(.*)$/
+const SSR_CLIENT_TELEPORT_MARKER = /^uid=([^;]*);client=(.*)$/
 function replaceServerOnlyComponentsSlots (ssrContext: NuxtSSRContext, html: string): string {
   const { teleports, islandContext } = ssrContext
   if (islandContext || !teleports) { return html }
@@ -591,3 +605,21 @@ function replaceServerOnlyComponentsSlots (ssrContext: NuxtSSRContext, html: str
   }
   return html
 }
+
+// TODO merge with replaceServerOnlyComponentsSlots once slots are refactored
+function replaceClientTeleport (ssrContext: NuxtSSRContext, html: string) {
+  const { teleports, islandContext } = ssrContext
+
+  if (islandContext || !teleports) { return html }
+  for (const key in teleports) {
+    const match = key.match(SSR_CLIENT_TELEPORT_MARKER)
+    if (!match) { continue }
+    const [, uid, clientId] = match
+    if (!uid || !clientId) { continue }
+    html = html.replace(new RegExp(`<div [^>]*nuxt-ssr-component-uid="${uid}"[^>]*>((?!nuxt-ssr-client="${clientId}"|nuxt-ssr-component-uid)[\\s\\S])*<div [^>]*nuxt-ssr-client="${clientId}"[^>]*>`), (full) => {
+
+      return full + teleports[key]
+    })
+  }
+  return html
+}

packages/nuxt/src/core/templates.ts

@@ -378,7 +378,8 @@ export const nuxtConfigTemplate = {
       `export const componentIslands = ${!!ctx.nuxt.options.experimental.componentIslands}`,
       `export const payloadExtraction = ${!!ctx.nuxt.options.experimental.payloadExtraction}`,
       `export const appManifest = ${!!ctx.nuxt.options.experimental.appManifest}`,
-      `export const remoteComponentIslands = ${ctx.nuxt.options.experimental.componentIslands === 'local+remote'}`,
+      `export const remoteComponentIslands = ${typeof ctx.nuxt.options.experimental.componentIslands === 'object' && ctx.nuxt.options.experimental.componentIslands.remoteIsland}`,
+      `export const selectiveClient = ${typeof ctx.nuxt.options.experimental.componentIslands === 'object' && ctx.nuxt.options.experimental.componentIslands.selectiveClient}`,
       `export const devPagesDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.dir.pages) : 'null'}`,
       `export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`,
       `export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`,

packages/nuxt/test/islandTransform.test.ts

@@ -1,6 +1,7 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import type { Plugin } from 'vite'
 import type { Component } from '@nuxt/schema'
+import type { UnpluginOptions } from 'unplugin'
 import { islandsTransform } from '../src/components/islandsTransform'
 import { normalizeLineEndings } from './utils'
 
@@ -17,12 +18,25 @@ const getComponents = () => [{
   preload: false
 }] as Component[]
 
-const pluginVite = islandsTransform.raw({
-  getComponents
-}, { framework: 'vite' }) as Plugin
+const pluginWebpack = islandsTransform.raw({
+  getComponents,
+  selectiveClient: true
+}, { framework: 'webpack', webpack: { compiler: {} as any } })
 
-const viteTransform = async (source: string, id: string) => {
-  const result = await (pluginVite.transform! as Function)(source, id)
+const viteTransform = async (source: string, id: string, isDev = false, selectiveClient = false) => {
+  const vitePlugin = islandsTransform.raw({
+    getComponents,
+    rootDir: '/root',
+    isDev,
+    selectiveClient
+  }, { framework: 'vite' }) as Plugin
+
+  const result = await (vitePlugin.transform! as Function)(source, id)
+  return typeof result === 'string' ? result : result?.code
+}
+
+const webpackTransform = async (source: string, id: string) => {
+  const result = await ((pluginWebpack as UnpluginOptions).transform! as Function)(source, id)
   return typeof result === 'string' ? result : result?.code
 }
 
@@ -57,6 +71,7 @@ describe('islandTransform - server and island components', () => {
               </template>
               <script setup lang="ts">
         import { vforToArray as __vforToArray } from '#app/components/utils'
+        import NuxtTeleportSsrClient from '#app/components/nuxt-teleport-ssr-client'
               const someData = 'some data'
 
               </script>"
@@ -87,6 +102,7 @@ describe('islandTransform - server and island components', () => {
               </template>
               <script setup lang="ts">
         import { vforToArray as __vforToArray } from '#app/components/utils'
+        import NuxtTeleportSsrClient from '#app/components/nuxt-teleport-ssr-client'
               const someData = 'some data'
 
               </script>"
@@ -150,6 +166,7 @@ describe('islandTransform - server and island components', () => {
 
             <script setup lang="ts">
         import { vforToArray as __vforToArray } from '#app/components/utils'
+        import NuxtTeleportSsrClient from '#app/components/nuxt-teleport-ssr-client'
             export interface Props {
               count?: number;
             }
@@ -161,4 +178,189 @@ describe('islandTransform - server and island components', () => {
       `)
     })
   })
+
+  describe('nuxt-client', () => {
+    describe('vite', () => {
+      it('test transform with vite in dev', async () => {
+        const result = await viteTransform(`<template>
+        <div>
+          <!-- should not be wrapped by NuxtTeleportSsrClient -->
+          <HelloWorld />
+          <!-- should be wrapped by NuxtTeleportSsrClient with a rootDir attr -->
+          <HelloWorld nuxt-client />
+        </div>
+      </template>
+      
+      <script setup lang="ts">
+      import HelloWorld from './HelloWorld.vue'
+      </script>
+      `, 'hello.server.vue', true, true)
+
+        expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
+          "<template>
+                  <div>
+                    <!-- should not be wrapped by NuxtTeleportSsrClient -->
+                    <HelloWorld />
+                    <!-- should be wrapped by NuxtTeleportSsrClient with a rootDir attr -->
+                    <NuxtTeleportSsrClient to=\\"HelloWorld-PIVollAJCe\\" root-dir=\\"/root\\" :nuxt-client=\\"true\\"><HelloWorld /></NuxtTeleportSsrClient>
+                  </div>
+                </template>
+                
+                <script setup lang=\\"ts\\">
+          import { vforToArray as __vforToArray } from '#app/components/utils'
+          import NuxtTeleportSsrClient from '#app/components/nuxt-teleport-ssr-client'
+                import HelloWorld from './HelloWorld.vue'
+                </script>
+                "
+        `)
+        // root-dir prop should never be used in production
+        expect(result).toContain('root-dir="/root"')
+      })
+
+      it('test transform with vite in prod', async () => {
+        const result = await viteTransform(`<template>
+        <div>
+          <HelloWorld />
+          <HelloWorld nuxt-client />
+        </div>
+      </template>
+      
+      <script setup lang="ts">
+      import HelloWorld from './HelloWorld.vue'
+      </script>
+      `, 'hello.server.vue', false, true)
+
+        expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
+          "<template>
+                  <div>
+                    <HelloWorld />
+                    <NuxtTeleportSsrClient to=\\"HelloWorld-CyH3UXLuYA\\"  :nuxt-client=\\"true\\"><HelloWorld /></NuxtTeleportSsrClient>
+                  </div>
+                </template>
+                
+                <script setup lang=\\"ts\\">
+          import { vforToArray as __vforToArray } from '#app/components/utils'
+          import NuxtTeleportSsrClient from '#app/components/nuxt-teleport-ssr-client'
+                import HelloWorld from './HelloWorld.vue'
+                </script>
+                "
+        `)
+
+        // root-dir prop should never be used in production
+        expect(result).not.toContain('root-dir="')
+      })
+
+      it('test dynamic nuxt-client', async () => {
+        const result = await viteTransform(`<template>
+        <div>
+          <HelloWorld />
+          <HelloWorld :nuxt-client="nuxtClient" />
+        </div>
+      </template>
+      
+      <script setup lang="ts">
+      import HelloWorld from './HelloWorld.vue'
+
+      const nuxtClient = false
+      </script>
+      `, 'hello.server.vue', false, true)
+
+        expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
+          "<template>
+                  <div>
+                    <HelloWorld />
+                    <NuxtTeleportSsrClient to=\\"HelloWorld-eo0XycWCUV\\"  :nuxt-client=\\"nuxtClient\\"><HelloWorld :nuxt-client=\\"nuxtClient\\" /></NuxtTeleportSsrClient>
+                  </div>
+                </template>
+                
+                <script setup lang=\\"ts\\">
+          import { vforToArray as __vforToArray } from '#app/components/utils'
+          import NuxtTeleportSsrClient from '#app/components/nuxt-teleport-ssr-client'
+                import HelloWorld from './HelloWorld.vue'
+
+                const nuxtClient = false
+                </script>
+                "
+        `)
+      })
+
+      it('should not transform if disabled', async () => {
+        const result = await viteTransform(`<template>
+        <div>
+          <HelloWorld />
+          <HelloWorld :nuxt-client="nuxtClient" />
+        </div>
+      </template>
+      
+      <script setup lang="ts">
+      import HelloWorld from './HelloWorld.vue'
+
+      const nuxtClient = false
+      </script>
+      `, 'hello.server.vue', false, false)
+
+        expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
+          "<template>
+                  <div>
+                    <HelloWorld />
+                    <HelloWorld :nuxt-client=\\"nuxtClient\\" />
+                  </div>
+                </template>
+                
+                <script setup lang=\\"ts\\">
+          import { vforToArray as __vforToArray } from '#app/components/utils'
+          import NuxtTeleportSsrClient from '#app/components/nuxt-teleport-ssr-client'
+                import HelloWorld from './HelloWorld.vue'
+
+                const nuxtClient = false
+                </script>
+                "
+        `)
+      })
+    })
+
+    describe('webpack', () => {
+      it('test transform with webpack', async () => {
+        const spyOnWarn = vi.spyOn(console, 'warn')
+        const result = await webpackTransform(`<template>
+        <div>
+          <!-- should not be wrapped by NuxtTeleportSsrClient -->
+          <HelloWorld />
+      
+          <!-- should be not wrapped by NuxtTeleportSsrClient for now -->
+          <HelloWorld nuxt-client />
+        </div>
+      </template>
+      
+      <script setup lang="ts">
+      import HelloWorld from './HelloWorld.vue'
+      
+      const someData = 'some data'
+      </script>
+      `, 'hello.server.vue')
+        expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
+          "<template>
+                  <div>
+                    <!-- should not be wrapped by NuxtTeleportSsrClient -->
+                    <HelloWorld />
+                
+                    <!-- should be not wrapped by NuxtTeleportSsrClient for now -->
+                    <HelloWorld nuxt-client />
+                  </div>
+                </template>
+                
+                <script setup lang=\\"ts\\">
+          import { vforToArray as __vforToArray } from '#app/components/utils'
+          import NuxtTeleportSsrClient from '#app/components/nuxt-teleport-ssr-client'
+                import HelloWorld from './HelloWorld.vue'
+                
+                const someData = 'some data'
+                </script>
+                "
+        `)
+
+        expect(spyOnWarn).toHaveBeenCalledWith('nuxt-client attribute and client components within islands is only supported with Vite. file: hello.server.vue')
+      })
+    })
+  })
 })

packages/schema/src/config/experimental.ts

@@ -132,13 +132,17 @@ export default defineUntypedSchema({
 
     /**
      * Experimental component islands support with <NuxtIsland> and .island.vue files.
-     * @type {true | 'local' | 'local+remote' | false}
+     * @type {true | 'local' | 'local+remote' | Partial<{ remoteIsland: boolean, selectiveClient: boolean }> | false}
      */
     componentIslands: {
       $resolve: (val) => {
-        if (typeof val === 'string') { return val }
-        if (val === true) { return 'local' }
-        return false
+        if (val === 'local+remote') {
+          return { remoteIsland: true }
+        }
+        if (val === 'local') {
+          return true
+        }
+        return val ?? false
       }
     },
 

test/basic.test.ts

@@ -7,6 +7,7 @@ import { join, normalize } from 'pathe'
 import { $fetch, createPage, fetch, isDev, setup, startServer, url, useTestContext } from '@nuxt/test-utils/e2e'
 import { $fetchComponent } from '@nuxt/test-utils/experimental'
 
+import type { ConsoleMessage } from 'playwright-core'
 import type { NuxtIslandResponse } from '../packages/nuxt/src/core/runtime/nitro/renderer'
 import { expectNoClientErrors, expectWithPolling, gotoPath, isRenderingJson, parseData, parsePayload, renderPage } from './utils'
 
@@ -1483,16 +1484,27 @@ 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')
 
+    if (!isWebpack) {
+      // test client component interactivity
+      expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 12')
+      await page.locator('.interactive-component-wrapper button').click()
+      expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 13')
+    }
+
     await page.close()
   })
 
   it('lazy server components', async () => {
+    const logs: ConsoleMessage[] = []
+
     const { page } = await renderPage('/server-components/lazy/start')
+
+    page.on('console', (msg) => { if (msg.type() === 'error') { logs.push(msg) } })
     await page.waitForLoadState('networkidle')
     await page.getByText('Go to page with lazy server component').click()
 
     const text = await page.innerText('pre')
-    expect(text).toMatchInlineSnapshot(`" End page <pre></pre><section id="fallback"> Loading server component </section><section id="no-fallback"><div></div></section>"`)
+    expect(text).toMatchInlineSnapshot('" End page <pre></pre><section id="fallback"> Loading server component </section><section id="no-fallback"><div></div></section><div></div>"')
     expect(text).not.toContain('async component that was very long')
     expect(text).toContain('Loading server component')
 
@@ -1502,6 +1514,26 @@ describe('server components/islands', () => {
     await page.waitForFunction(() => (document.querySelector('#no-fallback') as HTMLElement)?.innerText?.includes('async component'))
     await page.waitForFunction(() => (document.querySelector('#fallback') as HTMLElement)?.innerText?.includes('async component'))
 
+    // test navigating back and forth for lazy <ServerWithClient> component (should not trigger any issue)
+    await page.goBack({ waitUntil: 'networkidle' })
+    await page.getByText('Go to page with lazy server component').click()
+    await page.waitForLoadState('networkidle')
+
+    expect(logs).toHaveLength(0)
+
+    await page.close()
+  })
+
+  it('should not preload ComponentWithRef', async () => {
+    // should not add <ComponentWithRef> to the modulepreload list since it is used only server side
+    const { page } = await renderPage('/islands')
+    const links = await page.locator('link').all()
+    for (const link of links) {
+      if (await link.getAttribute('rel') === 'modulepreload') {
+        expect(await link.getAttribute('href')).not.toContain('ComponentWithRef')
+      }
+    }
+
     await page.close()
   })
 
@@ -1510,8 +1542,13 @@ describe('server components/islands', () => {
     await page.waitForLoadState('networkidle')
     await page.getByText('Go to page without lazy server component').click()
 
-    const text = await page.innerText('pre')
-    expect(text).toMatchInlineSnapshot(`" End page <pre></pre><section id="fallback"><div nuxt-ssr-component-uid="2"> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">42</div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div></section><section id="no-fallback"><div nuxt-ssr-component-uid="3"> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">42</div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div></section>"`)
+    const text = (await page.innerText('pre')).replace(/nuxt-ssr-client="([^"]*)"/g, (_, content) => `nuxt-ssr-client="${content.split('-')[0]}"`)
+
+    if (isWebpack) {
+      expect(text).toMatchInlineSnapshot('" End page <pre></pre><section id="fallback"><div nuxt-ssr-component-uid="4"> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">42</div><div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div></section><section id="no-fallback"><div nuxt-ssr-component-uid="5"> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">42</div><div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div></section><div nuxt-ssr-component-uid="3"> ServerWithClient.server.vue : <p>count: 0</p> This component should not be preloaded <div><!--[--><div>a</div><div>b</div><div>c</div><!--]--></div> This is not interactive <div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><div class="interactive-component-wrapper" style="border:solid 1px red;"> The component bellow is not a slot but declared as interactive <div class="sugar-counter" nuxt-client=""> Sugar Counter 12 x 1 = 12 <button> Inc </button></div></div></div>"')
+    } else {
+      expect(text).toMatchInlineSnapshot('" End page <pre></pre><section id="fallback"><div nuxt-ssr-component-uid="4"> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">42</div><div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div></section><section id="no-fallback"><div nuxt-ssr-component-uid="5"> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">42</div><div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div></section><div nuxt-ssr-component-uid="3"> ServerWithClient.server.vue : <p>count: 0</p> This component should not be preloaded <div><!--[--><div>a</div><div>b</div><div>c</div><!--]--></div> This is not interactive <div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><div class="interactive-component-wrapper" style="border:solid 1px red;"> The component bellow is not a slot but declared as interactive <!--[--><div style="display: contents;" nuxt-ssr-client="Counter"></div><!--teleport start--><!--teleport end--><!--]--></div></div>"')
+    }
     expect(text).toContain('async component that was very long')
 
     // Wait for all pending micro ticks to be cleared
@@ -1728,13 +1765,16 @@ describe('component islands', () => {
 
     expect(result).toMatchInlineSnapshot(`
       {
+        "chunks": {},
         "head": {
           "link": [],
           "style": [],
         },
         "html": "<pre nuxt-ssr-component-uid>    Route: /foo
         </pre>",
+        "props": {},
         "state": {},
+        "teleports": {},
       }
     `)
   })
@@ -1749,15 +1789,18 @@ describe('component islands', () => {
       result.head.link = result.head.link.filter(l => !l.href.includes('@nuxt+ui-templates') && (l.href.startsWith('_nuxt/components/islands/') && l.href.includes('_nuxt/components/islands/LongAsyncComponent')))
     }
     expect(result).toMatchInlineSnapshot(`
-      {
-        "head": {
-          "link": [],
-          "style": [],
-        },
-        "html": "<div nuxt-ssr-component-uid><div> count is above 2 </div><div style="display:contents;" nuxt-ssr-slot-name="default"></div> that was very long ... <div id="long-async-component-count">3</div>  <div style="display:contents;" nuxt-ssr-slot-name="test" nuxt-ssr-slot-data="[{&quot;count&quot;:3}]"></div><p>hello world !!!</p><div style="display:contents;" nuxt-ssr-slot-name="hello" nuxt-ssr-slot-data="[{&quot;t&quot;:0},{&quot;t&quot;:1},{&quot;t&quot;:2}]"><div nuxt-slot-fallback-start="hello"></div><!--[--><div style="display:contents;"><div> fallback slot -- index: 0</div></div><div style="display:contents;"><div> fallback slot -- index: 1</div></div><div style="display:contents;"><div> fallback slot -- index: 2</div></div><!--]--><div nuxt-slot-fallback-end></div></div><div style="display:contents;" nuxt-ssr-slot-name="fallback" nuxt-ssr-slot-data="[{&quot;t&quot;:&quot;fall&quot;},{&quot;t&quot;:&quot;back&quot;}]"><div nuxt-slot-fallback-start="fallback"></div><!--[--><div style="display:contents;"><div>fall slot -- index: 0</div><div class="fallback-slot-content"> wonderful fallback </div></div><div style="display:contents;"><div>back slot -- index: 1</div><div class="fallback-slot-content"> wonderful fallback </div></div><!--]--><div nuxt-slot-fallback-end></div></div></div>",
-        "state": {},
-      }
-    `)
+          {
+            "chunks": {},
+            "head": {
+              "link": [],
+              "style": [],
+            },
+            "html": "<div nuxt-ssr-component-uid><div> count is above 2 </div><div style="display:contents;" nuxt-ssr-slot-name="default"></div> that was very long ... <div id="long-async-component-count">3</div>  <div style="display:contents;" nuxt-ssr-slot-name="test" nuxt-ssr-slot-data="[{&quot;count&quot;:3}]"></div><p>hello world !!!</p><div style="display:contents;" nuxt-ssr-slot-name="hello" nuxt-ssr-slot-data="[{&quot;t&quot;:0},{&quot;t&quot;:1},{&quot;t&quot;:2}]"><div nuxt-slot-fallback-start="hello"></div><!--[--><div style="display:contents;"><div> fallback slot -- index: 0</div></div><div style="display:contents;"><div> fallback slot -- index: 1</div></div><div style="display:contents;"><div> fallback slot -- index: 2</div></div><!--]--><div nuxt-slot-fallback-end></div></div><div style="display:contents;" nuxt-ssr-slot-name="fallback" nuxt-ssr-slot-data="[{&quot;t&quot;:&quot;fall&quot;},{&quot;t&quot;:&quot;back&quot;}]"><div nuxt-slot-fallback-start="fallback"></div><!--[--><div style="display:contents;"><div>fall slot -- index: 0</div><div class="fallback-slot-content"> wonderful fallback </div></div><div style="display:contents;"><div>back slot -- index: 1</div><div class="fallback-slot-content"> wonderful fallback </div></div><!--]--><div nuxt-slot-fallback-end></div></div></div>",
+            "props": {},
+            "state": {},
+            "teleports": {},
+          }
+        `)
   })
 
   it('render .server async component', async () => {
@@ -1769,17 +1812,68 @@ describe('component islands', () => {
     if (isDev()) {
       result.head.link = result.head.link.filter(l => !l.href.includes('@nuxt+ui-templates') && (l.href.startsWith('_nuxt/components/islands/') && l.href.includes('_nuxt/components/islands/AsyncServerComponent')))
     }
+    result.props = {}
+    result.teleports = {}
+    result.chunks = {}
+    result.html = result.html.replace(/ nuxt-ssr-client="([^"]*)"/g, (_, content) => `'nuxt-ssr-client="${content.split('-')[0]}"`)
+
     expect(result).toMatchInlineSnapshot(`
+        {
+          "chunks": {},
+          "head": {
+            "link": [],
+            "style": [],
+          },
+          "html": "<div nuxt-ssr-component-uid> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">2</div><div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div>",
+          "props": {},
+          "state": {},
+          "teleports": {},
+        }
+      `)
+  })
+
+  if (!isWebpack) {
+    it('render server component with selective client hydration', async () => {
+      const result: NuxtIslandResponse = await $fetch('/__nuxt_island/ServerWithClient')
+      if (isDev()) {
+        result.head.link = result.head.link.filter(l => !l.href.includes('@nuxt+ui-templates') && (l.href.startsWith('_nuxt/components/islands/') && l.href.includes('_nuxt/components/islands/AsyncServerComponent')))
+      }
+      const { props, teleports, chunks } = result
+      result.props = {}
+      result.teleports = {}
+      result.chunks = {}
+      result.html = result.html.replace(/ nuxt-ssr-client="([^"]*)"/g, (_, content) => `'nuxt-ssr-client="${content.split('-')[0]}"`)
+
+      const propsEntries = Object.entries(props || {})
+      const teleportsEntries = Object.entries(teleports || {})
+      const chunksEntries = Object.entries(chunks || {})
+
+      expect(result).toMatchInlineSnapshot(`
+        {
+          "chunks": {},
+          "head": {
+            "link": [],
+            "style": [],
+          },
+          "html": "<div nuxt-ssr-component-uid> ServerWithClient.server.vue : <p>count: 0</p> This component should not be preloaded <div><!--[--><div>a</div><div>b</div><div>c</div><!--]--></div> This is not interactive <div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><div class="interactive-component-wrapper" style="border:solid 1px red;"> The component bellow is not a slot but declared as interactive <!--[--><div style="display: contents;"'nuxt-ssr-client="Counter"></div><!--teleport start--><!--teleport end--><!--]--></div></div>",
+          "props": {},
+          "state": {},
+          "teleports": {},
+        }
+      `)
+      expect(propsEntries).toHaveLength(1)
+      expect(teleportsEntries).toHaveLength(1)
+      expect(propsEntries[0][0].startsWith('Counter-')).toBeTruthy()
+      expect(teleportsEntries[0][0].startsWith('Counter-')).toBeTruthy()
+      expect(chunksEntries[0][0]).toBe('Counter')
+      expect(propsEntries[0][1]).toMatchInlineSnapshot(`
       {
-        "head": {
-          "link": [],
-          "style": [],
-        },
-        "html": "<div nuxt-ssr-component-uid> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">2</div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div>",
-        "state": {},
+        "multiplier": 1,
       }
     `)
-  })
+      expect(teleportsEntries[0][1]).toMatchInlineSnapshot('"<div class="sugar-counter"> Sugar Counter 12 x 1 = 12 <button> Inc </button></div><!--teleport anchor-->"')
+    })
+  }
 
   it('renders pure components', async () => {
     const result: NuxtIslandResponse = await $fetch(withQuery('/__nuxt_island/PureComponent.json', {
@@ -1874,6 +1968,13 @@ describe('component islands', () => {
     await page.locator('#first-sugar-counter button').click()
     expect(await page.locator('#first-sugar-counter').innerHTML()).toContain('Sugar Counter 13')
 
+    if (!isWebpack) {
+      // test client component interactivity
+      expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 12')
+      await page.locator('.interactive-component-wrapper button').click()
+      expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 13')
+    }
+
     await page.close()
   })
 

test/fixtures/basic/components/AsyncServerComponent.server.vue

@@ -5,6 +5,8 @@
     <div id="async-server-component-count">
       {{ count }}
     </div>
+
+    <Counter :multiplier="1" />
     <slot />
   </div>
 </template>

test/fixtures/basic/components/ServerWithClient.server.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    ServerWithClient.server.vue :
+    <p>count: {{ count }}</p>
+
+    This component should not be preloaded
+    <ComponentWithRef />
+
+    This is not interactive
+    <Counter :multiplier="1" />
+
+    <div
+      class="interactive-component-wrapper"
+      style="border: solid 1px red;"
+    >
+      The component bellow is not a slot but declared as interactive
+
+      <Counter
+        nuxt-client
+        :multiplier="1"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const count = ref(0)
+</script>

test/fixtures/basic/nuxt.config.ts

@@ -198,7 +198,9 @@ export default defineNuxtConfig({
     clientFallback: true,
     restoreState: true,
     inlineSSRStyles: id => !!id && !id.includes('assets.vue'),
-    componentIslands: true,
+    componentIslands: {
+      selectiveClient: true
+    },
     treeshakeClientOnly: true,
     asyncContext: process.env.TEST_CONTEXT === 'async',
     appManifest: process.env.TEST_MANIFEST !== 'manifest-off',

test/fixtures/basic/pages/islands.vue

@@ -105,6 +105,7 @@ const count = ref(0)
         </NuxtIsland>
       </div>
     </div>
+    <ServerWithClient />
   </div>
 </template>
 

test/fixtures/basic/pages/server-components/lazy/end.vue

@@ -31,5 +31,7 @@ const lazy = useRoute().query.lazy === 'true'
         :count="42"
       />
     </section>
+
+    <ServerWithClient :lazy="lazy" />
   </div>
 </template>

test/nuxt/nuxt-island.test.ts

@@ -9,7 +9,8 @@ vi.mock('#build/nuxt.config.mjs', async (original) => {
   return {
     // @ts-expect-error virtual file
     ...(await original()),
-    remoteComponentIslands: true
+    remoteComponentIslands: true,
+    selectiveClient: true
   }
 })