ssr:rendered Hook · 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) [Releases](https://unhead.unjs.io/docs/vue/releases/v3) Vue - [Switch to Vue](https://unhead.unjs.io/docs/vue/head/api/hooks/ssr-rendered) - [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/api/hooks/ssr-rendered) - [Switch to React](https://unhead.unjs.io/docs/react/head/api/hooks/ssr-rendered) - [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/api/hooks/ssr-rendered) - [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/api/hooks/ssr-rendered) - [Switch to Angular](https://unhead.unjs.io/docs/angular/head/api/hooks/ssr-rendered) - [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/api/hooks/ssr-rendered) v3 (stable) 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/api/get-started/overview) - Composables - [`useHead()`](https://unhead.unjs.io/docs/vue/head/api/composables/use-head) - [`useHeadSafe()`](https://unhead.unjs.io/docs/vue/head/api/composables/use-head-safe) - [`useSeoMeta()`](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta) - [`useScript()`](https://unhead.unjs.io/docs/vue/head/api/composables/use-script) - Hooks - [entries:updated](https://unhead.unjs.io/docs/vue/head/api/hooks/entries-updated) - [entries:resolve](https://unhead.unjs.io/docs/vue/head/api/hooks/entries-resolve) - [entries:normalize](https://unhead.unjs.io/docs/vue/head/api/hooks/entries-normalize) - [tag:normalise](https://unhead.unjs.io/docs/vue/head/api/hooks/tag-normalise) - [tags:beforeResolve](https://unhead.unjs.io/docs/vue/head/api/hooks/tags-before-resolve) - [tags:resolve](https://unhead.unjs.io/docs/vue/head/api/hooks/tags-resolve) - [tags:afterResolve](https://unhead.unjs.io/docs/vue/head/api/hooks/tags-after-resolve) - [dom:beforeRender](https://unhead.unjs.io/docs/vue/head/api/hooks/dom-before-render) - [ssr:beforeRender](https://unhead.unjs.io/docs/vue/head/api/hooks/ssr-before-render) - [ssr:render](https://unhead.unjs.io/docs/vue/head/api/hooks/ssr-render) - [ssr:rendered](https://unhead.unjs.io/docs/vue/head/api/hooks/ssr-rendered) - [script:updated](https://unhead.unjs.io/docs/vue/head/api/hooks/script-updated) - [Plugins](https://unhead.unjs.io/docs/head/api/plugins) Hooks # ssr:rendered Hook [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/7.api/hooks/14.ssr-rendered.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 - [Hook Signature](#hook-signature) - [Usage Example](#usage-example) - [Use Cases](#use-cases) The `ssr:rendered` hook is called after the server-side rendering process has completed and all head tags have been converted to HTML strings. This hook provides access to the final HTML output and allows for post-processing of the rendered HTML. ## [Hook Signature](#hook-signature) ``` export interface Hook { 'ssr:rendered': (ctx: SSRRenderContext) => SyncHookResult } ``` ### [Parameters](#parameters) | Name | Type | Description | | --- | --- | --- | | `ctx` | `SSRRenderContext` | Context object with rendering results | The `SSRRenderContext` interface is defined as: ``` interface SSRRenderContext { tags: HeadTag[] html: SSRHeadPayload } interface SSRHeadPayload { headTags: string bodyTags: string bodyTagsOpen: string htmlAttrs: string bodyAttrs: string } ``` ### [Returns](#returns) `SyncHookResult` which is `void`. This hook is synchronous and cannot be async. ## [Usage Example](#usage-example) ``` import { createHead } from '@unhead/vue' const head = createHead({ hooks: { 'ssr:rendered': (ctx) => { // Log the rendered HTML console.log('Head rendering complete:') console.log('HTML attributes:', ctx.html.htmlAttrs) console.log('Head tags:', ctx.html.headTags) // Modify rendered HTML if needed ctx.html.headTags += \`\` } } }) ``` ## [Use Cases](#use-cases) ### [HTML Post-processing](#html-post-processing) Apply final transformations to the rendered HTML: ``` import { defineHeadPlugin } from '@unhead/vue' export const htmlPostProcessingPlugin = defineHeadPlugin({ hooks: { 'ssr:rendered': (ctx) => { // Add server timing information as an HTML comment const renderTime = process.hrtime(globalThis.__UNHEAD_RENDER_START || [0, 0]) const renderTimeMs = Math.round((renderTime[0] * 1000) + (renderTime[1] / 1000000)) ctx.html.headTags += \`\n\` // Add server information for debugging in staging environments if (process.env.NODE_ENV === 'staging') { ctx.html.headTags += \`\n\` } // Apply minification to HTML in production if (process.env.NODE_ENV === 'production') { // Simple minification - remove unnecessary whitespace ctx.html.headTags = ctx.html.headTags .replace(/>\s+<') .replace(/\s{2,}/g, ' ') .trim() } } } }) ``` ### [Caching Rendered Output](#caching-rendered-output) Cache the rendered HTML for performance optimization: ``` import { defineHeadPlugin } from '@unhead/vue' export const ssrCachePlugin = defineHeadPlugin({ hooks: { 'ssr:rendered': (ctx) => { // Get the current cache key (set in ssr:beforeRender) const cacheKey = globalThis.__UNHEAD_CURRENT_CACHE_KEY if (cacheKey) { // Initialize cache if needed globalThis.__UNHEAD_CACHE = globalThis.__UNHEAD_CACHE || {} // Store rendered HTML in cache globalThis.__UNHEAD_CACHE[cacheKey] = { html: { ...ctx.html }, timestamp: Date.now(), tags: ctx.tags.length } // Log caching information console.log(\`Cached head HTML for key: ${cacheKey} (${ctx.tags.length} tags)\`) // Set expiration time setTimeout(() => { if (globalThis.__UNHEAD_CACHE && globalThis.__UNHEAD_CACHE[cacheKey]) { delete globalThis.__UNHEAD_CACHE[cacheKey] console.log(\`Expired head HTML cache for key: ${cacheKey}\`) } }, 300000) // Expire after 5 minutes } } } }) ``` ### [Analytics and Monitoring](#analytics-and-monitoring) Collect metrics about the server rendering process: ``` import { defineHeadPlugin } from '@unhead/vue' export const ssrAnalyticsPlugin = defineHeadPlugin({ hooks: { 'ssr:rendered': (ctx) => { // Calculate sizes for monitoring const metrics = { tagsCount: ctx.tags.length, htmlAttrsSize: ctx.html.htmlAttrs.length, headTagsSize: ctx.html.headTags.length, bodyTagsSize: ctx.html.bodyTags.length, bodyAttrsSize: ctx.html.bodyAttrs.length, totalSize: ctx.html.htmlAttrs.length + ctx.html.headTags.length + ctx.html.bodyTags.length + ctx.html.bodyAttrs.length + ctx.html.bodyTagsOpen.length } // Record metrics if (process.env.COLLECT_METRICS) { recordMetrics('unhead_ssr', metrics) } // Log warnings for unusually large payloads if (metrics.totalSize > 20000) { console.warn(\`Large head payload detected: ${metrics.totalSize} bytes\`) console.warn(\`Tags breakdown: HTML attrs (${metrics.htmlAttrsSize}), \` + \`Head tags (${metrics.headTagsSize}), \` + \`Body tags (${metrics.bodyTagsSize})\`) } } } }) // Placeholder for your metrics collection system function recordMetrics(name, data) { console.log(\`Recording metrics for ${name}:\`, data) // Your actual metrics recording logic here } ``` [Edit this page](https://github.com/unjs/unhead/edit/main/docs/head/7.api/hooks/14.ssr-rendered.md) [Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/7.api/hooks/14.ssr-rendered.md) Did this page help you? [ssr:render Hook for SSR tag processing. Add server-specific tags, apply i18n, and optimize platform-specific rendering.](https://unhead.unjs.io/docs/head/api/hooks/ssr-render) [script:updated Hook triggered on script status changes. Monitor loading, manage dependencies, and implement error recovery strategies.](https://unhead.unjs.io/docs/head/api/hooks/script-updated) On this page - [Hook Signature](#hook-signature) - [Usage Example](#usage-example) - [Use Cases](#use-cases) [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/vue/head/guides/get-started/overview) - [useHead](https://unhead.unjs.io/docs/vue/head/api/composables/use-head) - [useSeoMeta](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta) - [useHeadSafe](https://unhead.unjs.io/docs/vue/head/api/composables/use-head-safe) - [useScript](https://unhead.unjs.io/docs/vue/head/api/composables/use-script) ### Schema.org - [Getting Started](https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/overview) - [useSchemaOrg](https://unhead.unjs.io/docs/vue/schema-org/api/composables/use-schema-org) - [Nodes](https://unhead.unjs.io/docs/vue/schema-org/guides/core-concepts/nodes) - [Recipes](https://unhead.unjs.io/docs/vue/schema-org/guides/recipes/identity) ### Guides - [Titles](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Streaming SSR](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - [DOM Events](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Plugins](https://unhead.unjs.io/docs/vue/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 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)