diff --git a/packages/nuxt/src/app/components/client-only.mjs b/packages/nuxt/src/app/components/client-only.mjs
index 957020156a3..d782e319c6d 100644
--- a/packages/nuxt/src/app/components/client-only.mjs
+++ b/packages/nuxt/src/app/components/client-only.mjs
@@ -18,13 +18,19 @@ export default defineComponent({
   }
 })
 
+const cache = {}
+
 export function createClientOnly (component) {
+  if (cache[component.__name]) {
+    return cache[component.__name]
+  }
+
   const { setup, render: _render, template: _template } = component
   if (_render) {
     // override the component render (non script setup component)
     component.render = (ctx, ...args) => {
       return ctx.mounted$
-        ? h(Fragment, null, [h(_render(ctx, ...args), ctx.$attrs ?? ctx._.attrs)])
+        ? h(Fragment, ctx.props, [_render(ctx, ...args)])
         : h('div', ctx.$attrs ?? ctx._.attrs)
     }
   } else if (_template) {
@@ -34,7 +40,8 @@ export function createClientOnly (component) {
       <template v-else><div></div></template>
     `
   }
-  return defineComponent({
+
+  const definition = defineComponent({
     ...component,
     setup (props, ctx) {
       const mounted$ = ref(false)
@@ -46,11 +53,12 @@ export function createClientOnly (component) {
             ? { ...setupState, mounted$ }
             : (...args) => {
                 return mounted$.value
-                // use Fragment to avoid oldChildren is null issue
-                  ? h(Fragment, null, [h(setupState(...args), ctx.attrs)])
+                  ? h(Fragment, null, [setupState(...args)])
                   : h('div', ctx.attrs)
               }
         })
     }
   })
+  cache[component.__name] = definition
+  return definition
 }