Pusher部署到Vercel后仅切换标签页返回时才更新UI是什么原因？

云上老周

2026-8-28

问题根因

这问题本质是Vercel部署模型和本地开发环境的运行逻辑完全不同导致的，和Pusher本身的推送能力关系不大，核心问题有两个：

你把MongoDB ChangeStream持久监听逻辑跑在了Vercel的Serverless函数里
本地跑npm run dev的时候是一个常驻的Node.js进程，ChangeStream可以一直挂着监听数据库变更，自然能实时触发Pusher推送。但Vercel的Serverless函数是请求驱动的，执行完逻辑就会被冻结挂起，最长运行时间也只有10~60秒（看账号等级），根本不可能在后台持续监听数据库变更。你看到的"切走标签再切回来才更新"，是切回标签的动作重新发起了请求、唤醒了冻结的函数实例，之前堆积的事件才被一次性推到前端，根本不是实时推送。
代码里有几个配置错误，本地开发因为宽松环境没暴露，到Vercel的HTTPS生产环境就会触发问题：
- 服务端Pusher配置useTLS: false，客户端却开了forceTLS: true，HTTPS环境下非加密的推送请求会被拦截
- cluster: us2没加引号，属于语法错误，本地如果没同名变量会直接报错，部署到Vercel环境下很容易出现配置读取异常
- 客户端useEffect没有清理逻辑，会重复创建Pusher连接造成消息堆积
- ChangeStream没开updateLookup，update事件默认拿不到完整的修改后文档，很容易推送空数据
- Pusher触发的频道名用了collectionName变量，和客户端硬编码订阅的"reviews"很可能不匹配，消息发错频道

修复方案

首先把ChangeStream监听逻辑从Vercel部署的代码里迁出去，绝对不能在Serverless函数里跑常驻后台任务，选下面任意一种方案就行：
- 最省事：用MongoDB Atlas Triggers，直接在数据库控制台配置变更规则，数据更新时直接调用Pusher的HTTP推送接口，完全不需要自己写监听服务
- 成本低：单独找个支持常驻进程的服务（比如最便宜的云服务器、Render/Railway的基础款服务）专门跑ChangeStream监听+Pusher触发逻辑
- 生态适配：用Vercel官方推荐的Upstash Kafka接MongoDB变更事件，再通过webhook触发Pusher推送
修正Pusher服务端配置，对齐TLS参数、补上字符串引号：

// 服务端Pusher初始化
import Pusher from "pusher";

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID,
  key: process.env.PUSHER_KEY,
  secret: process.env.PUSHER_SECRET,
  cluster: "us2",
  useTLS: true,
});

export default pusher;

修正客户端订阅逻辑，加清理函数、注意客户端环境变量前缀（Next.js项目客户端可读取的环境变量必须加NEXT_PUBLIC_前缀，否则Vercel构建时不会注入到前端代码）：

// 组件内Pusher订阅逻辑
useEffect(() => {
  const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY, {
    cluster: "us2",
    forceTLS: true,
  });

  const channel = pusher.subscribe("reviews");
  channel.bind("updated", updateReview);

  // 组件卸载时清理连接，避免重复订阅
  return () => {
    channel.unbind("updated", updateReview);
    pusher.unsubscribe("reviews");
    pusher.disconnect();
  };
}, [updateReview]);

修正ChangeStream配置，确保能拿到完整更新文档、频道名和客户端一致：

// MongoDB ChangeStream监听
const changeStream = collection.watch([], { 
  fullDocument: "updateLookup" // 配置后update事件才会返回完整修改后的文档
});
changeStream.on("change", async (change) => {
  console.log("change: ", change);
  switch (change.operationType) {
    case "update": {
      const document = change.fullDocument;
      // 频道名和客户端订阅的保持一致，不要用不确定的变量
      pusher.trigger("reviews", "updated", document);
      break;
    }
  }
});

改完之后先确认监听侧的日志能实时捕获数据库变更、Pusher接口返回200成功状态码，前端不需要切换标签就能收到事件，点赞数就会实时更新了。

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