I built a gif dashboard that in the past few hours has seen a lot of traffic on Next 15.1.6. I deployed it to vercel, and I'm noticing my Fast Data Transfer usage is extremely high and nearing my limits (about +3GB every 15 min).

Right now, I get giphy.com urls from my database and then I pass those into the Next <Image/> component. I assume this is the problem because every browser that visits my site is downloading large number of gifs from the urls (1000s). I originally thought this wouldn't be a problem because the Image component lazy loads by default.

I tried to figure out a way to cache the unique image components themselves (one cache per Image w/ a unqiue url) using Vercel Data Cache, but I don't even think I can use it given that animated images, such as .gif, are not optimized. This is an issue because the minimumCacheTTL attribute in my next.config.js won't apply for unoptimized images!

Here is the Image component that renders the most Gifs:

"use client"
...

  return (
    <div className={`relative aspect-square overflow-hidden ${noHover ? "" : "group"}`}>
      <Image
        src={entry.gif || "https://media.giphy.com/media/PSxPL6jjDnpmM/giphy.gif?cid=790b76113my21jwo7n0bo6c9vmp23o9vrcafdr8s4td3xdmo&ep=v1_gifs_search&rid=giphy.gif&ct=g"}
        alt={entry.text}
        fill
        className={`object-cover ${noHover ? "" : "transition-transform duration-300 group-hover:scale-110"}`}
        onClick={handleTap}
      />
...
  )
}

Any ideas on what I can do? If I can't find a solution, I'll probably have to shut down the site in about 36 hours 😦