I have a Next.js 14 application deployed on Vercel that is experiencing issues with content revalidation. I have configured revalidation to occur every 24 hours using the revalidate option in the fetch function, but the content is not updating as expected on Vercel. However, the same application works correctly when deployed on Netlify.
Technical details:
- Next.js version: 14.2.9
- Revalidation configuration:
{ next: { revalidate: 86340 } }(24 hours in seconds) - Page type: Static Generation with
generateStaticParams
Relevant code:
import RestaurantInfoCard from "@/components/restaurantInfoCard"import { baseURL, entornos } from "@/config/config"import { notFound } from "next/navigation"export const metadata = { title: "Restaurantes"}async function getData(entorno) { const res = await fetch(`${baseURL}/dashboard_backend`, { next: { revalidate: 86340 } }) if (!res.ok) { throw new Error('Failed to fetch data') } return res.json()}export function generateStaticParams() { return entornos.map(entorno => ({ entorno: entorno }))}export default async function RestaurantsPage({ params }) { const { entorno } = params if (!entornos.includes(entorno)) notFound() const restaurants = await getData(entorno) return ( <> <div className="m-10 text-2xl font-bold"> {entorno.toUpperCase()} </div> <div className="mx-20 mb-5 grid 2xl:grid-cols-2 grid-cols-1 gap-7"> {restaurants.map(restaurant => ( <RestaurantInfoCard key={restaurant.id_restaurant} restaurant={restaurant} /> ))} </div> </> )}Steps to reproduce:
- Deploy the application to Vercel.
- Wait for more than 24 hours.
- Visit the page that should have been revalidated.
- Observe that the content has not been updated.
Expected behavior: The content should automatically update after the specified revalidation period, as it does when the application is deployed on Netlify.
Current behavior: On Vercel, the content remains unchanged, even after the revalidation period has passed. However, on Netlify, the revalidation works correctly and the content updates as expected.
Additional note: When I manually purge the cache from the project settings in Vercel (by going to "Settings" and selecting "Purge Cache"), the content does update. However, the revalidation does not happen automatically after the 24-hour period as expected.
Questions:
- Is there any additional configuration required in Vercel to ensure revalidation works correctly?
- Are there any known issues with revalidation in Next.js 14 when deployed to Vercel?
- Can you provide guidance on how to debug this issue or suggest alternative solutions?
- Why does the same application work correctly on Netlify but not on Vercel?
I appreciate your help in resolving this issue.