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'
]
}