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/ssr'

const head = createHead()

head.push({ title: 'Hello World ' })

const { headTags, bodyTags, bodyTagsOpen, htmlAttrs, bodyAttrs } = await 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)
})

Install Unhead SSR

Get started with Unhead SSR by installing the dependency to your project.

How SSR works

Get started with Unhead SSR by installing the dependency to your project.