My frontend is making a ghost calls to my backend

Hope you can help me here this is driving me crazy.

I have a function/route controller in my backend that gets an instagram profile pic:

app.get('/api/instagram/getProfilePic', upload.none(), async (req, res) => {
console.log('/api/instagram/getProfilePic');
console.log(req.query.username);
try {
  const username = req.query.username;
  ...

I call that function/route controller from this function in my frontend:

export const getInstagramProfilePic = async (username) => {
  const cacheName = `ig-profile-pic-${username}`;
  const url = `/api/instagram/getProfilePic?username=${username}`;

  const cachedResponse = await caches.match(url);
  if (cachedResponse) {
    console.log('La imagen está en caché');
    return cachedResponse.url;
  }

  console.log('La imagen debe cargarse desde la red');
  // The execution never reachs this line.
  const response = await fetch(url);

  const responseClone = response.clone();

  const blob = await response.blob();

  caches.open(cacheName).then((cache) => cache.put(url, responseClone));
  return URL.createObjectURL(blob);
};

The thing is that the code never gets to the line where I make the call to the backend which would be this one:

const response = await fetch(url);

Cause it always gets into the if (cachedResponse) section as you can see here:

enter image description here

But even though it never reachs that line I can see in my backend that the execution is going into the route controller /api/instagram/getProfilePic

enter image description here

In my code that link is used just in one place and according to the debugger it never reachs that line:

enter image description here
enter image description here

The point is that I don’t want to use the backend if the image is in my cache so why is going into the backend when the image is in cache already?

Thanks in advance