`+onData()` hook

Environment: client, server

Local

Cumulative

Provided by: vike

Hook called after the data fetched via +data is available.

// pages/movies/+onData.js
// Environment: client, server
 
export { onData }
 
function onData(pageContext) {
  // Do something with pageContext.data
  console.log(pageContext.data)
}

// pages/movies/+onData.ts
// Environment: client, server
 
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.js
// Environment: server
 
export { data }
 
async function data(pageContext) {
  const data = await fetchSomeData()
  return 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 lifecycle of the +onData hook differs from that of +data:

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

It's typically used for populating the initial state of a store with data fetched via +data.

To prevent hydration mismatches, the client must use the exact same initial state as the server during SSR.

The +onData hook enables you to set the store's initial state on the server during SSR (while the initial state is automatically sent to the client), and on the client upon client-side navigation.

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

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

+onData() hook

See also

`+onData()` hook