Edit this page

passToClient

TypeScript: (string | { prop: string; once?: boolean })[]
Cumulative: true
Global: false

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

// /pages/+config.js
// Environment: config
 
export default {
  passToClient: [
    // pageContext.someData
    'someData',
    // pageContext.user.id
    'user.id', // nested
    // pageContext.user.info.avatar.url
    'user.avatar.url', // deeply nested
  ]
}
// /pages/+onHydrationEnd.js
// Environment: client
 
export { onHydrationEnd }
 
async function onHydrationEnd(pageContext) {
  // Available here on the client-side thanks to passToClient
  console.log(pageContext.someData)
  console.log(pageContext.user.id)
  console.log(pageContext.user.avatar.url)
  // ...
}

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

once

⚠️
This is a beta feature: expect breaking changes in any minor version update. If we don't encounter issues over the next 1–2 months, we'll remove this warning and consider the feature stable.

By default, upon client-side navigation, properties are passed to the client again.

By setting once: true, the property is sent only once, at the beginning of the user's browsing session. The sent value is cached (saved in the globalContext) and re-used on each subsequent client-side navigation.

// /pages/+config.js
// Environment: config
 
export default {
  passToClient: [
    {
      // pageContext.user
      prop: 'user',
      // Send it only once: upon client-side navigation re-use the initial pageContext.user value
      once: true
    }
  ]
}

See also: Integration > Authentication

This is typically used to avoid pageContext.json requests upon client-side navigation.

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.

Escape .

In the (unlikely) event you need to pass properties that include . in their name:

// /pages/+config.js
// Environment: config
 
export default {
  passToClient: [
    // pageContext['some-weird.prop-name']
    'some-weird\\.prop-name',
    // pageContext['some-weird\\.prop-name']
    'some-weird\\\\.prop-name',
    // pageContext['some-weird\\\\.prop-name']
    'some-weird\\\\\\.prop-name'
  ]
}

See also