onRenderHtml()
hook
Environment: server
Cumulative: no
Global: no
The onRenderHtml()
hook defines how pages are rendered to HTML.
The hooks onRenderHtml()
and onRenderClient()
are essentially the glue code between Vike and your UI framework (React/Vue/Solid/...).
If you use a UI framework Vike extension
vike-react
/vike-vue
/vike-solid
, then you don't need to (and shouldn't) defineonRenderHtml()
as it's already defined byvike-react
/vike-vue
/vike-solid
.
// +onRenderHtml.ts
// Environment: server
export { onRenderHtml }
import type { PageContextServer } from 'vike/types'
import { escapeInject, dangerouslySkipEscape } from 'vike/server'
import { renderToHtml, createElement } from 'some-ui-framework'
async function onRenderHtml(pageContext: PageContextServer){
const { Page, data } = pageContext
const pageHtml = await renderToHtml(createElement(Page, data))
const documentHtml = escapeInject`<!DOCTYPE html>
<html>
<head>
<title>My SSR App</title>
</head>
<body>
<div id="page-root">${dangerouslySkipEscape(pageHtml)}</div>
</body>
</html>`
return {
documentHtml,
pageContext: {
// We can define pageContext values here
}
}
}
Where pageContext.Page
is the +Page
value of the page that is being rendered.