Estoy implementando pusher en una aplicación web usando nextjs. Funciona como se esperaba en mi entorno de desarrollo. Pero no funciona correctamente cuando lo implemento en vercel. Solo puedo ver los resultados cuando actualizo la página en el navegador.

Esta es la implementación para el cliente:

 useEffect(() => { const pusher = new Pusher(`${process.env.PUSHER_KEY}`, { cluster: `${process.env.PUSHER_CLUSTER}`, useTLS: true }); const channel = pusher.subscribe('franks-auto-spa'); channel.bind('cancel-wash', data => { console.log(data.date); removeWash(data.date); }); }, []);

Y esta es la implementación de la API:

 export default async (req, res) => { const connection = await mysql.createConnection(process.env.DATABASE_URL); console.log(req.body.date); const result = await connection.query('DELETE FROM ongoing WHERE date = ?', [req.body.date]); console.log(result); const pusher = new Pusher({ appId: `${process.env.PUSHER_ID}`, key: `${process.env.PUSHER_KEY}`, secret: `${process.env.PUSHER_SECRET}`, cluster: `${process.env.PUSHER_CLUSTER}`, useTLS: true }); pusher.trigger('franks-auto-spa', 'cancel-wash', req.body); res.json({message: 'Wash deleted deleted...'}); }

¿Me estoy perdiendo alguna configuración en Vercel?