diff --git a/packages/nuxt/src/head/module.ts b/packages/nuxt/src/head/module.ts
index 311170250c..b6d734b453 100644
--- a/packages/nuxt/src/head/module.ts
+++ b/packages/nuxt/src/head/module.ts
@@ -36,6 +36,11 @@ export default defineNuxtModule({
       })
     }
 
+    // allow @unhead/vue server composables to be tree-shaken from the client bundle
+    nuxt.options.optimization.treeShake.composables.client['@unhead/vue'] = [
+      'useServerHead', 'useServerSeoMeta', 'useServerHeadSafe'
+    ]
+
     addImportsSources({
       from: '@unhead/vue',
       // hard-coded for now we so don't support auto-imports on the deprecated composables
diff --git a/packages/nuxt/src/head/runtime/plugins/unhead.ts b/packages/nuxt/src/head/runtime/plugins/unhead.ts
index edb91a3ff3..f4c99a2f27 100644
--- a/packages/nuxt/src/head/runtime/plugins/unhead.ts
+++ b/packages/nuxt/src/head/runtime/plugins/unhead.ts
@@ -1,10 +1,11 @@
-import { createHead } from '@unhead/vue'
+import { createHead as createClientHead, createServerHead } from '@unhead/vue'
 import { renderSSRHead } from '@unhead/ssr'
 import { defineNuxtPlugin } from '#app/nuxt'
 // @ts-expect-error untyped
 import { appHead } from '#build/nuxt.config.mjs'
 
 export default defineNuxtPlugin((nuxtApp) => {
+  const createHead = process.server ? createServerHead : createClientHead
   const head = createHead()
   head.push(appHead)