Bundle Optimizations · Unhead [Unhead Home](https://unhead.unjs.io/ "Home") - [Docs](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Tools](https://unhead.unjs.io/tools) - [Learn](https://unhead.unjs.io/learn/guides/what-is-capo) [Releases](https://unhead.unjs.io/releases) Search…```k`` /` [Unhead on GitHub](https://github.com/unjs/unhead) [User Guides](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) [API](https://unhead.unjs.io/docs/vue/head/api/get-started/overview) Vue - [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/advanced/client-only-tags) - [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/advanced/client-only-tags) - [Switch to React](https://unhead.unjs.io/docs/react/head/guides/advanced/client-only-tags) - [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/advanced/client-only-tags) - [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/advanced/client-only-tags) - [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/advanced/client-only-tags) - [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/advanced/client-only-tags) v3 (beta) You're viewing **Unhead v3 beta** documentation. Head - [Discord Support](https://discord.com/invite/275MBUBvgP) - [Vue Playground](https://stackblitz.com/edit/github-1ftqrmwn) - Get Started - [Overview](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/vue/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/vue/head/guides/get-started/starter-recipes) - [Installation](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) - [Upgrade Guide](https://unhead.unjs.io/docs/vue/head/guides/get-started/migration) - Core Concepts - [Titles & Title Templates](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Tag Sorting & Placement](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/positions) - [Class & Style Attributes](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/class-attr) - [Inline Style & Scripts](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/inner-content) - [Tag Deduplication](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/handling-duplicates) - [DOM Event Handling](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Script Loading](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/loading-scripts) - [Context & Reactivity](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/reactivity-and-context) - [ Component](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components) - [Options API](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api) - [Pause DOM Rendering](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering) - [StreamingNew](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - Advanced - [Extending Unhead](https://unhead.unjs.io/docs/vue/head/guides/advanced/extending-unhead) - [Bundle Optimizations](https://unhead.unjs.io/docs/vue/head/guides/advanced/client-only-tags) - [Build Plugins](https://unhead.unjs.io/docs/vue/head/guides/advanced/vite-plugin) - Plugins - [Template Params](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) - [Alias Sorting](https://unhead.unjs.io/docs/vue/head/guides/plugins/alias-sorting) - [Canonical Plugin](https://unhead.unjs.io/docs/vue/head/guides/plugins/canonical) - [Infer SEO Meta](https://unhead.unjs.io/docs/vue/head/guides/plugins/infer-seo-meta-tags) - [Validate](https://unhead.unjs.io/docs/vue/head/guides/plugins/validate) Advanced # Bundle Optimizations [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/2.advanced/7.client-only-tags.md) Last updated Jan 19, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: sync](https://github.com/unjs/unhead/commit/d2f86454774aa60706628b46a850653e1e4d56d9). On this page - [How Do I Add Client-Only Tags?](#how-do-i-add-client-only-tags) - [How Do I Add Server-Only Tags?](#how-do-i-add-server-only-tags) - [Example Use Cases](#example-use-cases) - [What Are the Caveats?](#what-are-the-caveats) - [See Also](#see-also) **Quick Answer:** To reduce bundle size, use `import.meta.client` to conditionally add tags only on the client. For Vite, use the Unhead Vite plugin to tree-shake server-only code. Unhead runs on both server and client. You can conditionally render tags in one environment to optimize bundle size. ## [How Do I Add Client-Only Tags?](#how-do-i-add-client-only-tags) Client-only tags render exclusively in the browser, reducing server-side bundle size. ### [When to Use Client-Only Tags](#when-to-use-client-only-tags) - Analytics scripts (Google Analytics, Plausible, etc.) - User tracking and personalization scripts - Client-side feature detection - Progressive enhancement Use `import.meta.client` to conditionally add tags: ``` import { useHead } from '@unhead/vue' // Using import.meta environment variables if (import.meta.client) { useHead({ script: [ { src: 'https://example.com/analytics.js', defer: true } ] }) } ``` ## [How Do I Add Server-Only Tags?](#how-do-i-add-server-only-tags) Server-only tags render during SSR, reducing client-side bundle size. ### [When to Use Server-Only Tags](#when-to-use-server-only-tags) - SEO metadata that doesn't need client reactivity - Open Graph images and social media metadata - Static metadata that appears on every page - Schema.org structured data Use `import.meta.server` to conditionally add tags: ``` import { useHead } from '@unhead/vue' if (import.meta.server) { useHead({ meta: [ { property: 'og:image', content: 'https://example.com/my-image.jpg' } ] }) } ``` ## [Example Use Cases](#example-use-cases) ### [Analytics After Hydration](#analytics-after-hydration) Load analytics only after the application has hydrated: ``` import { useHead } from '@unhead/vue' if (import.meta.client) { useHead({ script: [ { src: 'https://example.com/analytics.js', defer: true, async: true } ] }) } ``` ### [Static SEO Tags on Server](#static-seo-tags-on-server) Add SEO metadata that doesn't need client updates: ``` import { useHead } from '@unhead/vue' if (import.meta.server) { useHead({ meta: [ { name: 'robots', content: 'index, follow' }, { name: 'description', content: 'Site description' } ] }) } ``` ## [What Are the Caveats?](#what-are-the-caveats) Some tags have dependencies that span client and server rendering: - `titleTemplate` affects `title` rendering - include on both client and server to avoid title flashing - Tags with `tagPosition` or `tagPriority` may behave differently if not consistently applied - Event handlers are only triggered in their respective environments Ensure dependent tags are included in both environments when needed. ## [See Also](#see-also) - [Tag Positions](https://unhead.unjs.io/docs/head/guides/core-concepts/positions) - Control tag placement - [Vite Plugin](https://unhead.unjs.io/docs/head/guides/advanced/vite-plugin) - Build-time optimizations - [useHead() API](https://unhead.unjs.io/docs/head/api/composables/use-head) - Full API reference [Edit this page](https://github.com/unjs/unhead/edit/main/docs/head/1.guides/2.advanced/7.client-only-tags.md) [Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/2.advanced/7.client-only-tags.md) Did this page help you? [Extending Unhead Create custom composables and plugins with Unhead's hooks API. Tap into tag resolution, DOM rendering, and SSR lifecycle events.](https://unhead.unjs.io/docs/head/guides/advanced/extending-unhead) [Build Plugins Vite and Webpack plugins for Unhead. Tree-shake server composables, transform useSeoMeta, save ~3kb in production bundles.](https://unhead.unjs.io/docs/head/guides/advanced/vite-plugin) On this page - [How Do I Add Client-Only Tags?](#how-do-i-add-client-only-tags) - [How Do I Add Server-Only Tags?](#how-do-i-add-server-only-tags) - [Example Use Cases](#example-use-cases) - [What Are the Caveats?](#what-are-the-caveats) - [See Also](#see-also) [GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP) [ /llms.txt](https://unhead.unjs.io/llms.txt) [Part of the UnJS ecosystem](https://unjs.io/) ### Articles - [Announcing Unhead v2](https://unhead.unjs.io/v2) ### Tools - [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator) - [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator) - [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator) ### Head - [Overview](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/vue/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/vue/head/guides/get-started/starter-recipes) ### Schema.org - [Introduction](https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/overview) Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)