--- title: "Streaming SSR · Unhead" meta: "og:description": "Stream head tags as async content resolves during server-side rendering" "og:title": "Streaming SSR · Unhead" description: "Stream head tags as async content resolves during server-side rendering" --- **Core Concepts** # **Streaming SSR** [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.typescript/head/guides/1.core-concepts/5.streaming.md) Last updated **Mar 2, 2026** by [Harlan Wilton](https://github.com/harlan-zw) in [feat(vue,streaming): lower level stream APIs (#674)](https://github.com/unjs/unhead/pull/674). **On this page ** - [How It Works](#how-it-works) - [Setup](#setup) - [Manual Stream Control](#manual-stream-control) - [Template-Free Integration](#template-free-integration) - [API Reference](#api-reference) - [When to Skip](#when-to-skip) **v3 Only** - Streaming support is only available in Unhead v3 (currently in beta). This API is experimental and may change. Standard SSR waits for everything to render before sending HTML. Streaming sends the document shell immediately, then streams content as async operations complete. The problem: when content loads asynchronously during SSR, any head tags set _after_ the initial render never reach the client's ``. The shell has already been sent. Unhead's streaming integration solves this by injecting `\`) } res.write('') ``` This approach is useful when integrating with custom streaming frameworks or when you need to control exactly when head patches are emitted. ## [Template-Free Integration](#template-free-integration) For frameworks that construct HTML programmatically (like Nuxt) rather than using an HTML template, use `renderShell` and `createBootstrapScript` directly: ``` import { createBootstrapScript, renderShell, renderSSRHeadSuspenseChunk } from 'unhead/stream/server' // Render and consume all current head entries atomically const { headTags, bodyTags, bodyTagsOpen, htmlAttrs, bodyAttrs } = renderShell(head) // Get the bootstrap script that creates the client-side stream queue const bootstrap = createBootstrapScript() // Build shell HTML programmatically const shell = '' + \`\` + \`${bootstrap}${headTags}\` + \`\` + (bodyTagsOpen || '') res.write(shell) // Stream app content, injecting head updates between chunks for await (const chunk of appStream) { res.write(chunk) const update = renderSSRHeadSuspenseChunk(head) if (update) res.write(\`\`) } // Render any final head entries (e.g. payload scripts added post-render) const closing = renderShell(head) res.write(closing.bodyTags + '') ``` ## [API Reference](#api-reference) ### [createStreamableHead](#createstreamablehead) Creates a streaming-aware head instance: ``` import { createStreamableHead } from 'unhead/stream/server' const { head, wrapStream } = createStreamableHead(options?: { streamKey?: string // Custom key for stream identification }) ``` ### [wrapStream](#wrapstream) Wraps a `ReadableStream` with head injection: ``` import { wrapStream } from 'unhead/stream/server' const wrappedStream = wrapStream( head: Unhead, stream: ReadableStream, template: string ): ReadableStream ``` ### [renderShell](#rendershell) Renders the current head state and clears entries atomically. Use this instead of manually calling `head.render()` followed by `head.entries.clear()`: ``` import { renderShell } from 'unhead/stream/server' const { headTags, bodyTags, bodyTagsOpen, htmlAttrs, bodyAttrs } = renderShell(head) ``` ### [createBootstrapScript](#createbootstrapscript) Generates the inline `