Unhead SSR Templates

You will need to update your app template to add in the templates for the SSR tags.

Different frameworks differ in how they handle this template.

In all cases, you'll be using the renderSSRHead function.

Some examples below:

Static String

import { createHead } from 'unhead'
import { renderSSRHead } from '@unhead/dom'
const head = createHead()
head.push({ title: 'Hello World ' })
const { headTags, bodyTags, bodyTagsOpen, htmlAttrs, bodyAttrs } = renderSSRHead(head)
return `
<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    ${headTags}
  </head>
  <body ${bodyAttrs}>
    ${bodyTagsOpen}
    <div id="app"></div>
    ${bodyTags}
  </body>
</html>`

Lodash

<html${htmlAttrs}>
  <head>
    ${headTags}
  </head>
  <body${bodyAttrs}>
    ${bodyTagsOpen}
    <div id="app">${appHTML}</div>
    ${bodyTags}
  </body>
</html>

String Replace

<!DOCTYPE html>
<html<!--htmlAttrs-->>
  <head>
    <!--headTags-->
    <!--preload-links-->
  </head>
  <body<!--bodyAttrs-->>
    <!--bodyTagsOpen-->
    <div id="app"><!--app-html--></div>
    <script type="module" src="/src/entry-client.js"></script>
    <!--bodyTags-->
  </body>
</html>

To handle this type of template you can use this code

const headPayload = await renderSSRHead(head)
Object.entries(headPayload).forEach(([key, value]) => {
  html = html.replace(`<!--${key}-->`, value)
})