---
title: The ssrContext Object
---
The `ssrContext` Object is the SSR context with which all the app's Vue components are rendered with.

## Usage

> [!NOTE]
> The `ssrContext` Object is available only on SSR builds, on the server-side compilation (when `import.meta.env.QUASAR_SERVER` is boolean `true`).

Among other places, it is supplied as parameter to [boot files](../boot-files.md), to the [Pinia instance](../state-management-with-pinia.md) and [Vue Router](../page-routing-with-vue-router.md) initialization functions, and to the [preFetch](../prefetch-feature.md) method:

```js
// a boot file
export default defineBoot(({ ..., ssrContext }) => { /* ... */ })

// src/router/index.js
export default defineRouter(({ ..., ssrContext }) => { /* ... */ })

// src/store/index.js
export default defineStore(({ ..., ssrContext }) => { /* ... */ })

// with preFetch:
preFetch: definePreFetch(({ ..., ssrContext }) => { /* ... */ })
```

You can also access the ssrContext in your Vue components. Below are two examples, one with Composition API and one with Options API:

```js
import { useSSRContext } from 'vue'

export default {
  // ...
  setup () {
    // we need to guard it and call it only on SSR server-side:
    const ssrContext = import.meta.env.QUASAR_SERVER ? useSSRContext() : null
    // ...do something with it
  }
}
```

## Anatomy of ssrContext

```json
ssrContext: {
  req, // Webserver-specific request object
  res, // Webserver-specific response object
  $q, // The Quasar's $q Object
  nonce, // (optional to set it yourself)
  // The global CSP "nonce" attribute to use.
  // Must be a non-empty base64 or base64url value.

  onRendered, // Registers a function to be executed server-side after
  // app has been rendered with Vue. You might need this
  // to access ssrContext again after it has been fully processed.
  // Example: ssrContext.onRendered(() => { /* ... */ })

  rendered // (optional to set it yourself)
  // Set this to a function which will be executed server-side
  // after the app has been rendered with Vue.
  // We recommend using the "onRendered" instead.
  //
  // Purpose: backward compatibility with Vue ecosystem packages
  // (like @vue/apollo-ssr)
  // Example: ssrContext.rendered = () => { /* ... */ }
}
```

More information on the purpose and required format of the `nonce` property is available on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce).

The exact `req` and `res` types depend on the selected webserver (Hono, Express, Fastify, or Koa). They represent the current request and response; consult that webserver's API before using framework-specific properties.

> [!IMPORTANT]
> Feel free to inject your own stuff into ssrContext too, but do NOT tamper with any of the private props (props that start with an underscore, eg. `_someProp`).