Streaming SSR · Unhead

[Unhead Home](https://unhead.unjs.io/ "Home")

- [Docs](https://unhead.unjs.io/docs/solid-js/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/solid-js/head/guides/get-started/overview)

[API](https://unhead.unjs.io/docs/solid-js/head/api/get-started/overview)

[Releases](https://unhead.unjs.io/docs/solid-js/releases/v3)

Solid.js

- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation)
- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation)
- [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation)
- [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation)
- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation)
- [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation)
- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation)

v3 (stable)

Head

- [Discord Support](https://discord.com/invite/275MBUBvgP)

- Get Started
  - [Overview](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview)
  - [Introduction to Unhead](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/intro-to-unhead)
  - [Starter Recipes](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/starter-recipes)
  - [Installation](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation)
  - [Upgrade Guide](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/migration)
- Core Concepts
  - [Titles & Title Templates](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles)
  - [Tag Sorting & Placement](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/positions)
  - [Class & Style Attributes](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/class-attr)
  - [Inline Style & Scripts](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/inner-content)
  - [Tag Deduplication](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/handling-duplicates)
  - [DOM Event Handling](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/dom-event-handling)
  - [Script Loading](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/loading-scripts)
  - [Reactivity](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/reactivity)
  - [StreamingNew](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming)
- Build Plugins
  - [Overview](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/overview)
  - [Tree-Shaking](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/tree-shaking)
  - [useSeoMeta Transform](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/seo-meta-transform)
  - [Minify Transform](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/minify-transform)
  - [Devtools](https://unhead.unjs.io/docs/solid-js/head/guides/build-plugins/devtools)
- Plugins
  - [Template Params](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params)
  - [Alias Sorting](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/alias-sorting)
  - [Canonical Plugin](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/canonical)
  - [Infer SEO Meta](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/infer-seo-meta-tags)
  - [Minify](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/minify)
  - [Validate](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/validate)

Core Concepts

# Streaming SSR

[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.solid-js/head/guides/1.core-concepts/5.streaming.md)

Last updated Apr 10, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [doc: v3 beta -> stable](https://github.com/unjs/unhead/commit/17c123eb9e8974bf72973246efdf26a199fd11bd).

On this page

- [How It Works](#how-it-works)
- [Setup](#setup)
- [Usage](#usage)
- [When to Skip](#when-to-skip)

Standard SSR waits for everything to render before sending HTML. Streaming sends the document shell immediately, then streams content as Suspense boundaries resolve.

The problem: resources inside `<Suspense>` using `useHead()` set head tags _after_ the initial render. Without streaming support, those tags never reach the client's `<head>`.

Unhead's streaming integration solves this by injecting `<script>` patches into the stream as each Suspense boundary resolves, updating the `<head>` in real-time.

## [How It Works](#how-it-works)

1. **Shell complete** - Solid calls `onCompleteShell`, initial `<head>` tags render
2. **Suspense resolves** - Resources settle and components call `useHead()`
3. **Patches stream** - Unhead injects DOM updates as inline scripts
4. **Client hydrates** - The client head instance picks up the final state

## [Setup](#setup)

### [Vite Plugin](#vite-plugin)

The plugin transforms your components to enable streaming head updates:

```
// vite.config.ts
import { unheadSolidPlugin } from '@unhead/solid-js/stream/vite'
import solid from 'vite-plugin-solid'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    solid(),
    unheadSolidPlugin(),
  ],
})
```

### [Server Entry](#server-entry)

```
// entry-server.tsx
import { renderToStream } from 'solid-js/web'
import { createStreamableHead, UnheadContext } from '@unhead/solid-js/stream/server'
import App from './App'

export function render(url: string, template: string) {
  const { head, onCompleteShell, wrapStream } = createStreamableHead()

  const { readable, writable } = new TransformStream()

  renderToStream(() => (
    <UnheadContext.Provider value={head}>
      <App url={url} />
    </UnheadContext.Provider>
  ), { onCompleteShell }).pipeTo(writable)

  return wrapStream(readable, template)
}
```

### [Client Entry](#client-entry)

```
// entry-client.tsx
import { hydrate } from 'solid-js/web'
import { createStreamableHead, UnheadContext } from '@unhead/solid-js/stream/client'
import App from './App'

const head = createStreamableHead()

hydrate(() => (
  <UnheadContext.Provider value={head}>
    <App url={window.location.pathname} />
  </UnheadContext.Provider>
), document.getElementById('app')!)
```

## [Usage](#usage)

Use `useHead()` normally in your components. Tags from resources inside Suspense boundaries stream automatically:

```
import { Suspense, createResource } from 'solid-js'
import { useHead } from '@unhead/solid-js'

function AsyncPage() {
  const [data] = createResource(fetchPageData)

  useHead({
    title: () => data()?.title,
    meta: [
      { name: 'description', content: () => data()?.description }
    ]
  })

  return <div>{data()?.content}</div>
}

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <AsyncPage />
    </Suspense>
  )
}
```

## [When to Skip](#when-to-skip)

If you're not using Suspense with resources, stick with standard SSR. The streaming setup adds complexity for no benefit when all head tags are synchronous.

[Edit this page](https://github.com/unjs/unhead/edit/main/docs/0.solid-js/head/guides/1.core-concepts/5.streaming.md)

[Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.solid-js/head/guides/1.core-concepts/5.streaming.md)

Did this page help you?

[Reactivity Use Solid.js signals with useHead() for reactive head tags. Pass getter functions and createResource() for async data.](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/reactivity) [Installation Add Schema.org to Solid.js apps with @unhead/schema-org. Setup defineWebSite(), defineWebPage() for Google Rich Results.](https://unhead.unjs.io/docs/solid-js/schema-org/guides/get-started/installation)

On this page

- [How It Works](#how-it-works)
- [Setup](#setup)
- [Usage](#usage)
- [When to Skip](#when-to-skip)

[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/)

### Head Management

- [Getting Started](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/solid-js/head/api/composables/use-script)

### Schema.org

- [Getting Started](https://unhead.unjs.io/docs/solid-js/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/solid-js/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/solid-js/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/solid-js/schema-org/guides/recipes/identity)

### Guides

- [Titles](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/solid-js/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/solid-js/head/guides/plugins/template-params)

### 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)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)

### Articles

- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)

### Research

- [State of <head> in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)

Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)