I’m new using NextJs 14, today when I fetch some data for external API I have seen the data don’t update in Vercel production, but in local with hard refresh (ctrl-f5) the data updated well. In my application, the API data updated about 24h. I tried to disable the cache in the response of the API but don’t work. The unique way I found to update the data in Vercel is to make a redeploy, but this is awful.

My fetch code is in /src/lib/data.js
(Part of the code)

export async function FetchPluvis() {
  const url = 'https://api-acua-production.up.railway.app/Api/pluvis'
  const response = await fetch(url, {
    headers: {
      'Cache-Control': 'no-cache',
    },
  })
  const data = await response.json()
  return data
}
}

And implemented in my component Bento
/src/componentes/bento

(Part of the code)

import { FetchPluvis } from '../lib/data'

async function Bento() {
  const pluvis = await FetchPluvis()
  return (
        <div className="col-span-6 rounded-lg bg-blue-950 bg-opacity-70 backdrop-blur-sm">
          <h1 className="p-2 text-center text-2xl font-normal text-[#7387f9]">
            Pluviometros últimas horas (l/m2)
          </h1>
          <div className="flex flex-col content-center justify-center px-2 text-[15px] lg:text-[16px]">
            <table className="text-textprimary">
              <thead className="text-left text-[#47ff63ab]">
                <tr>
                  <th className="px-1">Pluviometro</th>
                  <th className="px-1 text-right">Prov</th>
                  <th className="px-1 text-right">1h</th>
                  <th className="px-1 text-right">6h</th>
                  <th className="px-1 text-right">12h</th>
                  <th className="px-1 text-right">24h</th>
                </tr>
              </thead>
              <tbody>
                {pluvis.map((pluvi) => (
                  <tr
                    className="transition-all hover:scale-105 hover:text-[#0b92e4]"
                    key={pluvi.id_pluviometro}
                  >
                    <td className="p-1">{pluvi.nombre}</td>
                    <td className="p-1 text-right">{pluvi.provincia}</td>
                    <td className="p-1 text-right">{pluvi.h1}</td>
                    <td className="p-1 text-right">{pluvi.h6}</td>
                    <td className="p-1 text-right">{pluvi.h12}</td>
                    <td className="p-1 text-right">{pluvi.h24}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
)
}

When i delete the data from the DB, in localhost

In Vercel production when de db empty

Probably I’m doing something wrong, but I’m new in this, I hope someone with more experience help me.