Pusher not working in production on Vercel

[Hamzi-SE]

Summary

https://nextchatter.vercel.app/

This is the link of the deployed app. In development on my local machine everything is working fine but when I deploy it on Vercel, the messages and notifications are not working until I refresh the page or send another message. (requests are delayed by one request)

This is the link to my repository:
https://github.com/Hamzi-SE/NextChatter

Additional information

No response

Example

https://nextchatter.vercel.app/

[lightzane]

I am also encountering this issue, after deploying to Vercel, all the pusher events seems to be delayed by one request.
When sending a request, it will not be received.
After sending a 2nd request, the 1st request will show to the receiver.
When sending a 3rd request, the 2nd request will show to the receiver, and so on.

[Hamzi-SE]

Yeah encountering the same issue

[Hamzi-SE]

Found any solution? @lightzane

[NotAndreh]

I also had this issue and the solution for me was awaiting the pusher trigger function. I think that since vercel once you send the response to the client closes the serverless function, the pusher event doesn't have time to be sent

[Hamzi-SE]

Thanks for your answer @NotAndreh Can you provide the code how you did it?

[NotAndreh]

Sure, i changed

pusher.trigger('my-channel', 'my-event', {
  "message": "hello world"
});

to

await pusher.trigger('my-channel', 'my-event', {
  "message": "hello world"
});

This way the serverless function does not end before pusher has sent the message

[Hamzi-SE]

Great! Worked like charm! Thanks brother ❤

[lightzane]

Awesome! Thank you @NotAndreh !

[Minna937]

Thank you!!!!!!!!!!!❤❤

[Msantanna10]

Unbelievable... I hate those kind of simple things that make you spend hours/days/weeks... Finally, I knew it was simple but I just didnt know what it was. Thank you!

[PiotrBryla]

It's also worth remembering that Vercel will cache your GET requests by default, so when using Pusher triggers, use a different HTTP method.

[manuelffernandez]

I'm not really sure about this, but I think it's not necessary to replace the GET convention method to skip the cache behaviour. From what I saw in NextJS docs it's possible to avoid caching by exporting the route segment config 'dynamic' with 'force-dynamic' value

export const dynamic = 'force-dynamic'

export default GET function() {
  // Your code...
}

[nicitaacom]

@manuelffernandez You are right - thank you for your answer you helped to solve this issue - https://streamable.com/dze31q
(I added export const dynamic = 'force-dynamic' to /support/tickets/[ticketId]/page.tsx and MessagesBody.tsx)
@NotAndreh - thank you I just added await and now pusher work in production as well

Update: ok sometimes it doesn't fix this https://streamable.com/dze31q (I added router.refresh() on DesktopSidebarTicekt click - still the same)

Update 2: I fixed it in production - so your function to open some chat/ticket should look like this

 function openTicket(ticketId: string) {
    resetUnreadMessages(ticketId)
    setTimeout(() => {
      router.refresh()
    }, 250)
  }

I added timeout and it fiexs issue shown here https://streamable.com/dze31q

Possible fix 1: add await pusherServer.trigger something

Possible fix 2: add force-dynamic

// This is required to show all tickets in prodcuton
export const dynamic = "force-dynamic"

For me whole code looks like this

app/(support)/support/tickets/layout.tsx

export const metadata: Metadata = {
  title: "Hot Delivery - support",
  description: "Support on hot-delivery.vercel.app - we deliver you order as fresh as possible",
}

// This is required to show all tickets in prodcuton
export const dynamic = "force-dynamic"

export default async function SupportChatLayout({ children }: { children: React.ReactNode }) {
  const initialTickets = await getInitialTickets()
  const unreadMessages = await getUnreadMessages()

  // it is protected route and only SUPPORT role has access to this route
  const { data: role_response, error: anonymous_user } = await supabaseServer().from("users").select("role").single()
  // Allow SUPPORT to visit this page
  if (!role_response?.role.includes("SUPPORT") || anonymous_user) {
    redirect("/")
  }

  return (
    <>
      <Navbar />
      <div
        className="w-full h-[calc(100vh-81px)] overflow-x-hidden overflow-y-auto hide-scrollbar
      flex flex-row">
        <DesktopSidebar unseenMessages={unreadMessages ?? []} initialTickets={initialTickets} />
        <MobileSidebar unseenMessages={unreadMessages ?? []} initialTickets={initialTickets} />
        {children}
      </div>
    </>
  )
}