fetch revalidate being ignored
Unanswered
Palomino posted this in #help-forum
PalominoOP
Does anyone know why the fetch cache / revalidate is being ignored and this same request is being consistently made over and over again? (/featured).
The requests in the image are all within the space of 3 minutes. This component is in multiple (roughly 8 server components) wrapped inside a suspense
export async function FetchFeatured({ className, ...props }: PaginationOptions<'sample'> & { className?: string }) {
const url = new URL(`${process.env.API_ENDPOINT}/guilds/featured?route=fetch_featured`);
if (props?.limit) url.searchParams.set('limit', props.limit.toString());
if (props?.offset) url.searchParams.set('offset', props.offset.toString());
if (props?.sample) url.searchParams.set('sample', props.sample.toString());
const response = await fetch(url.toString(), {
headers: APIKey,
next: {
revalidate: 3_600
}
});
if (!response.ok) {
return [];
}
const data = await response.json();
if (typeof data === 'undefined' || !Array.isArray(data)) return [];
return <FeaturedGuilds featuredGuilds={data} className={className} />
}
The requests in the image are all within the space of 3 minutes. This component is in multiple (roughly 8 server components) wrapped inside a suspense
8 Replies
Dutch
fetch('https://...', { next: { revalidate: 3600 } })
https://nextjs.org/docs/14/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data
@Dutch `fetch('https://...', { next: { revalidate: 3600 } })`
https://nextjs.org/docs/14/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data
PalominoOP
That's what I do if you look at the code I sent
Philippine Crocodile
Not sure about the repeat requests, but we are also seeing route-level revalidate times being ignore. We have a component that should be revalidating every hour, but it's instead defaulting to revalidate once per year.
PalominoOP
It seems to only occur when the fetch is called in a suspense inside a server component
E.g
E.g
export default async function Page() {
<Suspense>
<ComponentWhichMakesAFetchCall />
</Suspense>
}
Philippine Crocodile
@Palomino is that to say that the fetch revalidate will accept and abide by the timeout as long as the fetch is within a suspense inside a server component?
Or are you saying the revalidate value is only ignored when the fetch is made inside of a suspense inside of a server component?
For me at least, I'm not sure why it's ignoring but it's causing multiple unnecessary fetch requests