Pusher.js is blazing fast on dev but has 0.5-2 second latency on production

[vivzn]

Summary

frontend

useEffect(() => {
    pusherClient.subscribe(pathname as string)
    const moveHandler = (data: any) => {
        //...
      }
    }
    pusherClient.bind('move', moveHandler)

    const msgHandler = (data: any) => {
      //...
    }

    pusherClient.bind('msg', msgHandler)

    return () => {
      pusherClient.unsubscribe(pathname as string)
      pusherClient.unbind('msg', msgHandler);
      pusherClient.unbind('move', moveHandler);
    }
  }, []);

next app API side

//add a sessionID in the text to ignore the sender who sent

import { pusherServer } from "@/pusherConfig"

export async function POST(req: Request) {
  const { text, roomId, channel } = await req.json()


  //ADD AWAIT HER
  await pusherServer.trigger(roomId, channel, text)

  return new Response(JSON.stringify({ success: true }))
}

calling it in frontend

const sendMove = async (text: any, roomId: string, channel: string) => {
    await axios.post('/api/msg', { text, roomId, channel })
  }

pusher is blazing fast like 100ms only to send and recieve a msg from different channels on dev mode however when i deploy it it becomes very slow (i am using ap1 singapore pusher servers, i live in hong kong). i am deploying it on vercel and for some reason it is quite slow espeically the first pusher msg which i send which takes like 3-4 seconds and the ones after take 1 - 2 seconds.

I have set NODE_ENV to production and my next config looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false,
    images: {
        domains: [
            "lh3.googleusercontent.com"
        ]
    }
};

export default nextConfig;

```


this is my pusher

```
import PusherServer from 'pusher';
import PusherClient from 'pusher-js';

export const pusherServer = new PusherServer({
    appId: "1781690",
    key: "15619571febcdb15535c",
    secret: "f082646bd8a93b372a10",
    cluster: "ap1",
    useTLS: true,
})

export const pusherClient = new PusherClient("15619571febcdb15535c", {
    cluster: "ap1",
    authEndpoint: "/api/pusher-auth",
    authTransport: "ajax",
    auth: {
        headers: {
            'Content-Type': "application/json"
        }
    }
});


```