`+onHydrationEnd()` hook

Environment: client

Local

Non-cumulative

Provided by: vike

You can use the onHydrationEnd() hook to implement initialization that needs to be executed once the page has finished hydrating.

The onHydrationEnd() hook requires Client Routing.

// /pages/+onHydrationEnd.js
// Environment: client
 
export { onHydrationEnd }
 
// The onHydrationEnd() hook is called after the onRenderClient() hook finishes rendering the
// first page the user navigates to. (The onHydrationEnd() hook isn't called upon subsequent
// page navigation.)
async function onHydrationEnd(pageContext) {
  console.log('The page is now interactive')
}

// /pages/+onHydrationEnd.ts
// Environment: client
 
export { onHydrationEnd }
 
import type { PageContextClient } from 'vike/types'
 
// The onHydrationEnd() hook is called after the onRenderClient() hook finishes rendering the
// first page the user navigates to. (The onHydrationEnd() hook isn't called upon subsequent
// page navigation.)
async function onHydrationEnd(pageContext: PageContextClient) {
  console.log('The page is now interactive')
}

+onHydrationEnd() hook

See also

`+onHydrationEnd()` hook