passToClient

Most pageContext values are available only on the server-side, but you can use passToClient to make them available on the client-side.

// /pages/+config.js
// Environment: config
 
export default {
  passToClient: [
    'user'
  ]
}
// /pages/+onHydrationEnd.js
// Environment: client
 
export { onHydrationEnd }
 
async function onHydrationEnd(pageContext) {
  // pageContext.user is available here thanks to passToClient
  console.log(pageContext.user)
 
  // ...
}

Some values, such as pageContext.data, are already passed to the client-side by default.

Error

If you try to access a pageContext value that isn't defined on the client-side then Vike throws an error:

[Vike][Wrong Usage] pageContext.someProp isn't defined on the client-side

See the stack trace to find which pageContext.someProp occurrence in your code triggers the error.

To avoid the error:

  1. Add 'someProp' to passToClient (see above), or
  2. Replace pageContext.someProp with 'someProp' in pageContext && pageContext.someProp. 
    // ❌ Vike throws an error if pageContext.someProp isn't defined.
const val = pageContext.someProp 
// ✅ With doesn't throw any error if pageContext.someProp isn't defined.
const val = 'someProp' in pageContext && pageContext.someProp 
// Or:
const val = 'someProp' in pageContext ? pageContext.someProp : someDefaultValue

Default

When using Client Routing, the following are also available on the client-side by default:

  • pageContext.Page
  • pageContext.data
  • pageContext.config
  • pageContext.isHydration
  • pageContext.isBackwardNavigation
  • pageContext.routeParams
  • pageContext.urlOriginal
  • pageContext.urlPathname
  • pageContext.urlParsed

When using Server Routing, the following are also available on the client-side by default:

  • pageContext.Page
  • pageContext.data
  • pageContext.config
  • pageContext.routeParams

Serialization

Serialization is done with @brillout/json-serializer.

User-defined classes are lost during serialization:

class MyClass {
  prop = 42
}
 
// On the server-side:
const obj = new MyClass()
console.log(obj) // MyClass { prop: 42 }
console.log(obj instanceof MyClass) // true
 
// On the browser-side, after `obj` was (de)serialized:
console.log(obj) // { prop: 42 }
console.log(obj instanceof MyClass) // false

See GitHub > brillout/json-serializer > #3 Support user-defined classes.

See also