--- title: "Streaming SSR" description: "Stream head tags as async content resolves during server-side rendering" canonical_url: "https://unhead.unjs.io/docs/typescript/head/guides/core-concepts/streaming" last_updated: "2026-06-04T17:36:33.834Z" --- 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 For frameworks that construct HTML programmatically (like Nuxt) rather than using an HTML template, use `renderShell` and `createBootstrapScript` directly: ```ts 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 ### createStreamableHead Creates a streaming-aware head instance: ```ts import { createStreamableHead } from 'unhead/stream/server' const { head, wrapStream } = createStreamableHead(options?: { streamKey?: string // Custom key for stream identification }) ``` ### wrapStream Wraps a `ReadableStream` with head injection: ```ts import { wrapStream } from 'unhead/stream/server' const wrappedStream = wrapStream( head: Unhead, stream: ReadableStream, template: string ): ReadableStream ``` ### renderShell Renders the current head state and clears entries atomically. Use this instead of manually calling `head.render()` followed by `head.entries.clear()`: ```ts import { renderShell } from 'unhead/stream/server' const { headTags, bodyTags, bodyTagsOpen, htmlAttrs, bodyAttrs } = renderShell(head) ``` ### createBootstrapScript Generates the inline `