`onData()` hook

Environment: server, client.
Cumulative: true.

Hook called as soon as pageContext.data is available.

// pages/movies/+onData.ts
// Environment: server, client
 
export { onData }
 
import type { PageContext } from 'vike/types'
import type { Data } from './+data'
 
function onData(pageContext: PageContext & { data: Data }) {
  // Do something with pageContext.data
  console.log(pageContext.data)
}

// pages/movies/+data.ts
// Environment: server
 
export { data }
export type Data = Awaited<ReturnType<typeof data>>
 
import type { PageContextServer } from 'vike/types'
 
async function data(pageContext: PageContextServer) {
  const data = await fetchSomeData()
  return data
}

The purpose of +onData is that, unlike +data which is called only on the server-side, it's also called on the client-side:

Upon SSR (or pre-rendering), +onData is called on the server-side right after +data.
Upon client-side navigation, it is called on the client-side right after pageContext.data was received from the server.

You typically use +onData when you want to do something with pageContext.data on the client-side.

For example, a common use case is to populate a store using pageContext.data.

It's cumulative, so you can define multiple +onData:

pages/+onData.js # Global hook called after every +data
pages/movies/+onData.js
pages/movies/+data.js # Both +onData hooks are called after this +data hook

onData() hook

See also

`onData()` hook