Why does Pusher update the UI only after navigating to another tab?

Question

I used pusher to add real-time updates to my web app. Like if a user hits the like button on a post, the number of likes increases instantaneously in the UI.

That works fine when I run the app locally (illustrative GIF).
But when I deployed the app to Vercel, Pusher doesn't update the UI, unless I navigate to another tab and then return back to my app tab (GIF).

Vercel logs show that everything works as expected. The React component subscribes properly to Pusher channel and gets the new data. However, the UI never updates while I'm viewing the tab.

// Setting up pusher

import Pusher from "pusher";

const pusher = new Pusher({
  appId: PUSHER_APP_ID,
  key: PUSHER_KEY,
  secret: PUSHER_SECRET,
  cluster: us2,
  useTLS: false,
});

export default pusher;

  // Subscribing the component to Pusher channel

  useEffect(
    function subscribeToPusher() {
      const pusher = new Pusher(PUSHER_KEY, {
        cluster: us2,
        forceTLS: true,
      });

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

  // Listen to MongoDB's ChangeStream

  changeStream.on("change", async (change) => {
    console.log("change: ", change);

    switch (change.operationType) {
      case "update": {
        const document = change.fullDocument;
        pusher.trigger(collectionName, "updated", document);
        break;
      }
    }
  });

Note: the deployed version works as expected when I run npm run dev locally which is a bit strange.

Answer 1

It was Vercel. It worked once I tried Heroku.