Получение данных в Vercel не обновляет NextJs 14
Когда я получил некоторые данные для внешнего API, я увидел, что данные не обновляются в рабочей версии Vercel, но в локальной версии с жестким обновлением (ctrl-f5) данные обновляются хорошо. В моем приложении данные API обновляются каждые 24 часа. Я пытался отключить кеш в ответе API, но это не сработало. Единственный способ обновления данных в Верселе, который я нашел, — это перераспределение, но это ужасно.
Мой код выборки находится в /src/lib/data.js. (Часть кода)
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
}
}
И реализован в моем компоненте Bento /src/компоненты/бенто
(Часть кода)
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>
)
}
Когда я удаляю данные из БД, на локальном хосте
В производстве Vercel, когда база данных пуста
Возможно, я делаю что-то не так, но я новичок в этом, надеюсь, мне поможет кто-то более опытный.
Ответы 2
В верхней части вашего компонента попробуйте добавить
export const dynamic = "force-dynamic";
Производственная сборка совершенно другая в nextjs, где все кэшируется по умолчанию, приведенный выше код откажется от кэширования, поэтому вы всегда будете получать новые данные при каждом обновлении. Кроме того, поскольку вы упомянули, что ваши данные меняются каждые 24 часа, вы также можете добавить export const revalidate = 10;, чтобы это вызывало API каждые 10 секунд
Я исправил это, добавив эти строки
export const revalidate = 60
export const dynamic = 'force-dynamic'
export const fetchCache = 'force-no-store'
в мой файл Page.js, чтобы проверять данные каждые 60 секунд, и добавить приостановку для потоковой передачи данных с резервным скелетом.
// 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 />
</>
)
}