如何在Quasar中用Composition API编写SSR通用代码及处理setup逻辑？

Quasar官方说明过，在编写SSR通用代码时，Vue组件的created和beforeCreate钩子会在服务器端执行。针对你提出的几个Composition API相关问题，解答如下：

1. setup函数的执行逻辑 #

• 在SSR场景下，setup的执行时机和beforeCreate、created完全一致：服务器端渲染时执行一次，客户端页面激活（hydrate）时再执行一次。
• 它是Composition API的入口，在组件实例创建前就会运行，此时无法访问this（因为实例还未初始化）。
• 服务器端执行setup时，会收集组件的状态和数据，用于生成最终的HTML字符串；客户端执行时，会复用服务器端留下的状态，完成页面激活，避免重复渲染内容。

2. 如何使用Composition API实现SSR功能 #

• 利用SSR专用钩子预取数据：使用onServerPrefetch钩子（Composition API版本），在服务器端提前获取组件所需数据，确保渲染HTML时数据已准备完毕。示例代码：

import { onServerPrefetch, ref } from 'vue'

export default {
  setup() {
    const data = ref(null)

    onServerPrefetch(async () => {
      // 仅在服务器端发起数据请求
      data.value = await fetchSomeData()
    })

    return { data }
  }
}

• 适配状态管理工具：如果用Pinia，它原生支持SSR，只需完成服务器端状态序列化、客户端状态恢复的配置即可；Vuex也有对应的SSR适配逻辑，核心是为每个服务器请求创建独立的store实例，避免状态污染。
• 隔离浏览器专属API：如果要调用window、document这类仅浏览器存在的API，必须放在onMounted或Quasar提供的onClientMounted钩子中，避免服务器端执行时报错。

3. 如何用Composition API编写通用代码 #

• 通过环境变量区分执行逻辑：用process.client/process.server（Quasar环境）或import.meta.env.SSR（Vite环境）判断代码执行环境，把浏览器专属逻辑隔离到客户端执行。示例：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const windowWidth = ref(0)

    onMounted(() => {
      if (process.client) { // 仅在客户端运行
        windowWidth.value = window.innerWidth
        window.addEventListener('resize', () => {
          windowWidth.value = window.innerWidth
        })
      }
    })

    return { windowWidth }
  }
}

• 优先使用跨环境兼容API：比如用Vue Router的useRouter钩子代替直接操作window.location，这类API会自动适配SSR环境，无需额外处理。
• 避免在setup顶层直接执行副作用：不要在setup最外层直接发起请求或操作DOM，而是放到onServerPrefetch（服务器端）或onMounted（客户端）中，确保逻辑只在对应环境触发。

4. 如何判断Composition API中哪些代码会在SSR中执行 #

• setup顶层代码：所有直接写在setup函数里、没有被环境判断包裹的代码，都会在服务器端和客户端各执行一次。比如：

setup() {
  console.log('这段代码SSR和客户端都会执行') // 服务器端控制台、客户端控制台都会输出
  return {}
}

• SSR专属钩子代码：onServerPrefetch中的代码仅在服务器端执行，客户端不会运行。
• 客户端专属钩子代码：onMounted、onUpdated、onUnmounted这类生命周期钩子，以及Quasar的onClientMounted，里面的代码仅在客户端执行，服务器端不会处理。
• 环境判断分支代码：用process.server/process.client或import.meta.env.SSR判断后的分支，只会在对应环境执行。比如if (process.server) { ... }里的代码仅在SSR时运行。

内容的提问来源于stack exchange，提问作者Chiara Ani