onAfterRenderHtml() hook

Environment: server.

Implemented by: vike-react/vike-vue.

You need vike-react/vike-vue to be able to use onAfterRenderHtml().

Hook called right after rendering the +Page component to HTML.

It's called upon rendering the first page.

  • It's called regardless of whether SSR is disabled. (The first page the user visits is always rendered to HTML: when SSR is disabled then the HTML is just an HTML shell that doesn't contain the content of the page.)
  • It isn't called upon page navigation. (Pages aren't rendered to HTML upon page navigation.)

Conditionally

If you want to apply onAfterRenderHtml() only for SSR then check whether pageContext.Page is set:

// pages/+onAfterRenderHtml.js
 
export async function onAfterRenderHtml(pageContext) {
  const isSSR = !!pageContext.Page
  if (isSSR) {
    // ...
  }
}

pageContext

Commonly used pageContext properties inside onAfterRenderHtml():

// pages/+onAfterRenderHtml.js
 
export function onAfterRenderHtml(pageContext) {
 // The +Page.vue component rendered to the HTML string
 pageContext.pageHtmlString
 // The +Page.vue component rendered to an HTML stream
 pageContext.pageHtmlStream
}

Use cases

It's usually used for integrating tools, such as dehydrating state management libraries.

See also