Vue中serverPrefetch效果丢失？onMounted里offer值为何为null？

1. serverPrefetch效果丢失的原因 #

你在服务端通过onServerPrefetch拿到的数据，没同步到客户端。Vue SSR的逻辑里，服务端渲染完组件后，得把预取的状态**序列化（脱水）**到页面的全局变量里，客户端初始化时再把这个状态读出来恢复（注水）。没做这一步的话，客户端加载页面时组件会重新初始化，offer直接回到初始的null，等于服务端白预取了数据。

2. onMounted里offer值为null的原因 #

和上面是同一个问题：客户端没拿到服务端预取的offer值。服务端渲染时offer确实被赋值了，但这个值只存在服务端内存里，没传递到客户端。客户端启动后组件重新创建，offer还是初始的null，所以onMounted里的!offer.value判断会成立，打印出null。

解决办法 #

要让服务端数据同步到客户端，你需要做这几步：

• 服务端：把组件预取的offer值挂载到SSR上下文的状态中（比如用Vuex/Pinia的SSR插件，或者自定义全局状态）
• 服务端渲染的HTML模板：把这个状态序列化成全局变量，比如写个<script>window.__INITIAL_STATE__ = ${JSON.stringify(state)}</script>
• 客户端入口：读取这个全局变量，把offer.value设置为对应的值，完成状态恢复

举个简单的自定义实现示例：

// 服务端组件中的onServerPrefetch修改
onServerPrefetch(async () => {
  offer.value = await fetchOffer();
  // 把数据挂载到SSR上下文（假设ctx通过inject获取）
  const ctx = inject('ssrContext');
  ctx.state.offer = offer.value;
});

// 客户端入口文件
if (window.__INITIAL_STATE__) {
  offer.value = window.__INITIAL_STATE__.offer;
}

如果用的是Nuxt这类封装好的SSR框架，直接用asyncData或useAsyncData即可，框架会自动处理脱水注水，不用自己写上面的逻辑。

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