⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

passToClient

Usually, passToClient is used with onBeforeRender() for fetching data, see example at Guides > Data Fetching > onBeforeRender().

By default pageContext is available only on the server-side. We use passToClient to make parts of pageContext available in the browser.

// *.page.server.js
// Environment: server

export { passToClient }

// Example of `pageContext` often passed to the browser
const passToClient = [
  'pageProps',
  'routeParams',
  // (Deep selection isn't implemented yet; open a GitHub ticket if you want this.)
  'user.id',
  'user.name'
]
// *.page.client.js
// Environment: browser

export { render }

async function render(pageContext) {
  // Thanks to `passToClient`, these `pageContext` are available here in the browser
  pageContext.pageProps
  pageContext.routeParams
  pageContext.user.id
  pageContext.user.name

  /* ... */
}

passToClient is usually used together with the onBeforeRender() hook: data is fetched in async onBeforeRender() and then made available to the browser with passToClient, see Data Fetching.

Serialization is done with @brillout/json-serializer.

User-defined classes

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.