ssrContext对象是SSR的上下文，所有应用程序的Vue组件都是用它来渲染的。

用法

在其他地方，它作为参数提供给启动文件、Vuex存储和Vue路由器初始化函数，以及预取 方法:

// 一个启动文件
export default ({ ..., ssrContext }) => { /* ... */ }

// src/router/index.[js|ts]
export default ({ ..., ssrContext }) { /* ... */ }

// src/store/index.[js|ts]
export default ({ ..., ssrContext }) { /* ... */ }

// 使用预取:
preFetch ({ ..., ssrContext }) { /* ... */ }

你也可以在你的Vue组件中访问ssrContext。下面是两个例子，一个用Composition API，一个用Options API:

// Composition API
import { useSSRContext } from 'vue'

export default {
  // ...
  setup () {
    //  我们需要保护它，只在SSR服务器端调用它：
    const ssrContext = process.env.SERVER ? useSSRContext() : null
    // ...对它做一些事情
  }
}

// Options API
export default {
  // ...
  created () { //  可以是任何其他Vue组件的生命周期钩子
    this.ssrContext
  }
}

Anatomy of ssrContext

ssrContext: {
  req, // Express.js对象
  res, // Express.js对象
  $q, // Quasar的$q对象
  state, // Vuex的状态（只有在使用Vuex存储的情况下）。

  nonce, // (可选择自己设置)
              // 使用的全局 "nonce "属性。

  onRendered, // 注册一个函数，在应用被Vue渲染后在服务器端执行。
              // 在完全处理ssrContext之后，
              // 你可能需要这个函数来再次访问ssrContext。
              // 例子: ssrContext.onRendered(() => { /* ... */ })

  rendered // (可选，自己设置)
              // 将此设置为一个函数，
              // 该函数将在应用被Vue渲染后在服务器端执行 
              // 我们建议使用 "onRendered "来代替。
              //
              // 目的：向后兼容Vue生态系统包
              // (比如@vue/apollo-ssr)
              // 例子: ssrContext.rendered = () => { /* ... */ }
}

关于“nonce”属性的目的的更多信息可以在MDN上找到。

req和res是Express.js对当前服务器客户端的对象。req的一个用例是访问req.url以获得客户端正在请求的URL。