🔍Search
📚 Docs Menu
🌱 Get Started

onBeforeRenderClient() hook

Environment: client.

Implemented by: vike-react/vike-vue.

You need vike-react/vike-vue to be able to use onBeforeRenderClient(). If you don't use vike-react/vike-vue then see Without vike-{react,vue,solid}.

Hook called at the beginning of rendering the page on the client-side. It's usually used for integrating tools, such as state management tools.

It's called upon rendering the first page (e.g. hydration when using SSR) and upon page navigation.

If you want to perform an action only upon hydration then use pageContext.isHydration:

// +onBeforeRenderClient.js
 
export function onBeforeRenderClient(pageContext) {
  if (pageContext.isHydration) {
    // ...
  }
}

It's called by vike-{react,vue} at the beginning of its onRenderClient() implementation.

Without vike-{react,vue,solid}

If you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid, then you don't need onBeforeRenderClient() nor onAfterRenderClient() since you already have full control over the client-side rendering at your onRenderClient() hook.

See also