如何防止Nuxt的Pinia状态序列化到DOM及被CDN缓存？

在Nuxt SSR场景中，页面渲染时获取用户信息并存储到Pinia Store后，这些数据会被序列化到__NUXT_DATA__中用于客户端hydration。但启用CDN加速后，CDN会缓存包含__NUXT_DATA__的页面内容，导致其他访客可能看到缓存的他人用户状态，且无法全局禁用CDN缓存。

已尝试的解决方案 #

• 查阅Nuxt官方文档及源码，未找到禁用Pinia Store序列化到__NUXT_DATA__的配置项；
• 创建Nuxt中间件，尝试检查Store并添加Cache-Control响应头，但遇到两个问题：要么useRequestEvent()返回undefined无法获取请求上下文，要么读取Pinia Store的时机过早（即使设置为最后运行的中间件），后续用户信息更新后无法应用正确的缓存头；
• 尝试在Nitro服务端插件中监听render:response事件，计划根据Pinia Store状态添加条件化Cache-Control头，但Nitro环境无法直接访问Nuxt或Pinia Store，导致服务器崩溃。

疑问 #

1. 如何禁用SSR到客户端hydration过程中，Pinia Store数据被序列化到__NUXT_DATA__？
2. 或者如何正确读取Pinia Store状态，并根据其为响应添加条件化的Cache-Control头？

额外信息 #

• Nuxt版本：3.10
• Pinia版本：2.2.6

解决方案 #

方案一：禁止敏感Pinia数据序列化到__NUXT_DATA__ #

Pinia支持通过自定义逻辑控制哪些数据被序列化到服务端输出的__NUXT_DATA__中：

1. 自定义Store的hydrate逻辑
   在定义Pinia Store时，通过hydrate选项限制状态仅在客户端恢复，避免服务端序列化敏感数据：

// stores/user.ts
export const useUserStore = defineStore('user', {
  state: () => ({
    id: '',
    name: '',
    email: ''
  }),
  hydrate(state, initialState) {
    // 仅在客户端执行状态恢复
    if (process.client) {
      Object.assign(state, initialState)
    }
  }
})

2. 在服务端渲染完成后过滤__NUXT_DATA__
   通过Nuxt插件监听app:rendered钩子，直接移除__NUXT_DATA__中的敏感Pinia数据：

// plugins/filter-nuxt-data.ts
export default defineNuxtPlugin(nuxtApp => {
  if (process.server) {
    nuxtApp.hooks.hook('app:rendered', () => {
      const nuxtData = nuxtApp.payload.data
      // 精准删除指定Pinia Store的数据
      if (nuxtData['pinia:user']) {
        delete nuxtData['pinia:user']
      }
    })
  }
})

方案二：根据Pinia状态动态设置Cache-Control头 #

在服务端页面渲染完成后、响应发送前的时机，读取Pinia状态并设置响应头：

1. 页面组件内直接设置响应头
   在用户信息加载完成后，通过useRequestEvent获取服务端上下文并设置头：

<!-- pages/profile.vue -->
<script setup>
const userStore = useUserStore()
// 加载用户信息的异步方法
await userStore.fetchUserInfo()

if (process.server) {
  const event = useRequestEvent()
  if (event) {
    if (userStore.id) {
      // 存在用户信息时禁止CDN缓存
      event.res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
    } else {
      // 未登录状态允许CDN缓存
      event.res.setHeader('Cache-Control', 'public, max-age=3600')
    }
  }
}
</script>

2. 通过Nuxt+Nitro传递状态设置头
   先在Nuxt插件中将Pinia状态传递到上下文，再在Nitro插件中读取并设置响应头：

// plugins/pass-store-state.ts
export default defineNuxtPlugin(nuxtApp => {
  if (process.server) {
    nuxtApp.hooks.hook('app:rendered', () => {
      const userStore = useUserStore()
      // 将用户状态挂载到nuxtApp上下文
      nuxtApp._hasUser = !!userStore.id
    })
  }
})

// server/plugins/cache-control.ts
export default defineNitroPlugin(nitroApp => {
  nitroApp.hooks.hook('render:response', (response, { event }) => {
    const hasUser = event.context._nuxtApp?._hasUser
    response.headers['Cache-Control'] = hasUser 
      ? 'no-cache, no-store, must-revalidate' 
      : 'public, max-age=3600'
  })
})

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