Hooks

List of built-in hooks. (You can create your own.)

Basics

data(): server (configurable) Called before the page is rendered, for fetching data.
guard(): server (configurable) Protect pages from unprivileged access.
onHydrationEnd(): client Called after the page is hydrated.
onPageTransitionStart(): client Called upon page navigation, before the new page starts rendering.
onPageTransitionEnd(): client Called upon page navigation, after the new page has finished rendering.
onCreatePageContext(): server & client Hook called when a pageContext object is created.
onCreateGlobalContext(): server & client Hook called when the globalContext object is created.

Pre-rendering

onBeforePrerenderStart(): server Called before the whole Pre-rendering process starts.
onPrerenderStart(): server Global hook called when Pre-rendering starts.

vike-vue

onCreateApp(): server & client vike-vue Called after creating Vue's app instance.

Advanced

Most users don't need to know about these hooks.

onData(): server & client Called as soon as pageContext.data is available.
onBeforeRender(): server (configurable) Called before the page is rendered, lower-level and usually for advanced integrations with data fetching tools.
onRenderHtml(): server Called when a page is rendered to HTML on the server-side.
onRenderClient(): client Called when a page is rendered on the client-side.
onBeforeRoute(): server & client Called before the URL is routed to a page.
onBeforeRenderClient(): client Called at the beginning of onRenderClient().
onAfterRenderClient(): client Called at the end of onRenderClient().
onBeforeRenderHtml(): server Called at the beginning of onRenderHtml().
onAfterRenderHtml(): server Called at the end of onRenderHtml().

Upcoming

Potentially upcoming hooks:

Lifecycle

See also:

API > pageContext > Lifecycle

API > globalContext > Lifecycle

The order in which the hooks are called (the hook flow).

The following doesn't contain the hooks of the Vike extensions vike-react/vike-vue/vike-solid such as onAfterRenderHtml() or onAfterRenderClient().

The onCreateGlobalContext() hook is called when the globalContext object is created, see API > globalContext > Lifecycle.

Default

If you didn't change the environment of data() nor onBeforeRender():

First render

server renderPage()
server onBeforeRoute()
server Routing

The routing executes your Route Functions (of all your pages).
server onCreatePageContext()
server guard()
server data()
server onData()
server onBeforeRender()
server onRenderHtml()
client onCreatePageContext()
client onRenderClient()
client onHydrationEnd()

Client-side navigation

client onPageTransitionStart()
client onBeforeRoute()
client Routing
client onCreatePageContext()
server onBeforeRoute()
server Routing
server onCreatePageContext()

The routing is executed twice: once for the client and once for the server.
server guard()
server data()
server onBeforeRender()
client onData()
client onRenderClient()
client onPageTransitionEnd()

Client-side only `data()`

If you configured data() and onBeforeRender() as well to run only on the client-side: