---
title: "Bundle Optimizations · v2 · Unhead"
meta:
  "og:description": "Optimize your application bundle size with client and server-side rendering strategies"
  "og:title": "Bundle Optimizations · v2 · Unhead"
  description: "Optimize your application bundle size with client and server-side rendering strategies"
---

**Advanced**

# **Bundle Optimizations**

**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)
- [Implementation with Import Guards](#implementation-with-import-guards)
- [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'

useHead(unheadInstance, {
  script: [
    {
      src: 'https://example.com/analytics.js',
      defer: true
    }
  ]
}, { mode: 'client' })
```

## [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'

useHead(unheadInstance, {
  meta: [
    {
      property: 'og:image',
      content: 'https://example.com/my-image.jpg'
    }
  ]
}, { mode: 'server' })
```

## [Implementation with Import Guards](#implementation-with-import-guards)

For more advanced bundle optimization, you can use your framework's environment variables:

```
// Using import.meta environment variables
if (import.meta.client) {
  useHead({
    script: [{ src: 'https://example.com/analytics.js' }]
  })
}

if (import.meta.server) {
  useHead({
    meta: [{ property: 'og:image', content: '/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'

useHead(unheadInstance, {
  script: [
    {
      src: 'https://example.com/analytics.js',
      defer: true,
      async: true
    }
  ]
}, { mode: 'client' })
```

### [Static SEO Tags on Server](#static-seo-tags-on-server)

Add SEO metadata that doesn't need client updates:

```
import { useHead } from 'unhead'

useHead(unheadInstance, {
  meta: [
    { name: 'robots', content: 'index, follow' },
    { name: 'description', content: 'Site description' }
  ]
}, { mode: 'server' })
```

## [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 (`onBeforeRender`, etc.) 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/v2/head/guides/core-concepts/positions) - Control tag placement
- [**Vite Plugin**](https://unhead.unjs.io/docs/v2/head/guides/advanced/vite-plugin) - Build-time optimizations
- [**useHead() API**](https://unhead.unjs.io/docs/v2/head/api/composables/use-head) - Full API reference

[Edit this page](https://github.com/unjs/unhead/edit/v2.1.2/docs/v2/head/1.guides/2.advanced/7.client-only-tags.md)

**Did this page help you? **

[**Extending Unhead** Learn how to extend Unhead with hooks and plugins to create custom functionality](https://unhead.unjs.io/docs/v2/head/guides/advanced/extending-unhead) [**Build Plugins** Optimize your Unhead bundle size with official build plugins for Vite and Webpack](https://unhead.unjs.io/docs/v2/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)
- [Implementation with Import Guards](#implementation-with-import-guards)
- [Example Use Cases](#example-use-cases)
- [What Are the Caveats?](#what-are-the-caveats)
- [See Also](#see-also)