Spotify integration returns stale data on Vercel production deployment

Other Questions Spotify
1

I’m using a music tracking library to display my current or recently played Spotify tracks. Everything works perfectly when running locally, but after deploying to Vercel, the API seems to return cached or outdated information.

// api/spotify-track.js

import { MusicTracker, Services } from '@bolajiolajide/now-playing';

export async function GET() {
  const tracker = new MusicTracker(Services.SPOTIFY, {
    useCache: false,
    cacheDuration: 30000,
    streamerArgs: {
      clientId: process.env.SPOTIFY_APP_ID || 'DEFAULT_ID',
      clientSecret: process.env.SPOTIFY_APP_SECRET || 'DEFAULT_SECRET',
      refreshToken: process.env.SPOTIFY_REFRESH_TOKEN || 'DEFAULT_TOKEN',
    },
  });

  try {
    const result = await tracker.fetchCurrentlyPlayingOrLastPlayed();
    return Response.json({ result });
  } catch (err) {
    return Response.json({ err });
  }
}

In my local environment, when I switch songs or stop playback, the API correctly shows the updated track information. But on the deployed version, it keeps showing the same track that was playing during deployment time, even when I change songs.

The environment variables are identical in both environments, but the production API consistently returns a 304 status code. Any ideas why this caching behavior only happens on Vercel?

2

I had this exact same problem with Spotify API on Vercel. Vercel’s edge functions cache responses by default, and that 304 status means HTTP caching is messing with your fresh data requests. You need to explicitly disable caching in your API route with response headers. Add Cache-Control: no-store, no-cache, must-revalidate and Pragma: no-cache to your return statements. Also check for any middleware or Vercel config that’s enabling automatic caching. Your tracker config’s useCache being false won’t help here - that’s Vercel’s own caching layer causing the issue.

3

try setting export const revalidate = 0 in your api route - this tells vercel not to cache the response at all. worked for me when i had similar issues with dynamic data getting stuck

4

This happens because Vercel automatically caches API responses at the platform level. You disabled caching in MusicTracker, but Vercel still caches based on the request URL and headers. Since your Spotify API endpoint doesn’t change between requests, Vercel thinks the response should be the same. A few ways to fix this: add dynamic parameters to break the cache, use proper cache headers like others mentioned, or add a timestamp query parameter in your frontend requests - that forces Vercel to treat each request as unique. I’ve also had success adding export const dynamic = 'force-dynamic' to the API route to prevent caching in production.

5

for sure! vercel is notorious for caching stuff. adding those headers like Cache-Control: no-cache might help clear things up. also, look into your API’s revalidate settings in vercel; that could do the trick too!