Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Data Fetching in Vercel don't update NextJs 14

When I fetched some data for an external API, I have seen the data don’t update in Vercel production, but in local with a hard refresh (ctrl-f5), the data updated well. In my application, the API data updated every 24 hrs. I tried to disable the cache in the response of the API, but it didn’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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed it adding this lines

    export const revalidate = 60
export const dynamic = 'force-dynamic'
export const fetchCache = 'force-no-store'

    to my Page.js file to revalidate the data every 60s, and add Suspense for data streaming with skeleton fallback.

    // src/Page.js
import Intro from '@/app/components/Intro'
import Bento from '@/app/components/Bento'
import Fuentes from '@/app/components/Fuentes'
import SkeletonBento from './skeletrons/BentoSkeleton'
import { Suspense } from 'react'

export const revalidate = 60
export const dynamic = 'force-dynamic'
export const fetchCache = 'force-no-store'

export default function Home() {
  return (
    <>
      <Intro />
      <Suspense fallback={<SkeletonBento />}>
        <Bento />
      </Suspense>
      <Fuentes />
    </>
  )
}

  2. 0

    At the top of your component try adding
    export const dynamic = "force-dynamic";

    Production build is totally different in nextjs where everything is cached by default the above code will opt-out caching so you always get new data on every refresh Also since you mentioned your data is changed every 24hours you can also add export const revalidate = 10; so this will call API every 10 seconds

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search