I’m encountering an issue with fetch using {next: {revalidate}} in Next.js. I expected that once the revalidation period expires, the data would update in the background, and users accessing the page wouldn’t have to wait for the cache to refresh. However, I’m seeing the opposite behavior: the request made at the moment the cache expires seems to wait for the fetch operation to complete before serving the response.
Is there a way to implement a true stale-while-revalidate behavior? Ideally, I want users to be served stale content immediately while the cache is being refreshed in the background. Any advice or solutions would be greatly appreciated!
I believe that the behavior you’re experiencing with {next: {revalidate}} is expected:
When the cache expires, the next request still returns stale data.
This request triggers a background revalidation.
The cache is updated once revalidation is complete.
For more control over stale-while-revalidate behavior, you can use the Cache-Control HTTP header instead:
Set this header in API routes or Server-Side Rendered (SSR) pages.
Use s-maxage to set the fresh cache duration.
Use stale-while-revalidate to allow serving stale content while revalidating.
This approach ensures immediate content delivery (fresh or stale) while background revalidation occurs.
It’s particularly effective when using Vercel’s Edge Network.
