Invalidate a static page's cache

[Nick-Mazuk]

From my understanding, Next.js currently supports incremental static generation/regeneration and allows you to invalidate the cached page after a given amount of time. This works great for pages with data that never changes, or pages with data that change frequently.

However, I've had several use cases where data rarely changes, but when it does, the update needs to happen quickly.

For instance, with eCommerce, products don't necessarily change that often. But when something like the price changes, the page should update accordingly.

So if you do:

export async function getStaticProps(context) {
  return {
    props: { data },
    revalidate: 300, // 5 minutes
  }
}

It provides near real-time updates but results in many useless database reads and regenerations. Especially for pages that may not be updated for weeks or months. And if users don't view this specific page every X minutes, all users effectively see uncached pages.

But if you use a longer time interval:

export async function getStaticProps(context) {
  return {
    props: { data },
    revalidate: 604800, // 1 week
  }
}

You get all the user experience benefits you'd need except that crucial data may be out of date for up to a week. That's a bad user experience if they add a $39 item to their cart only to find out at checkout that it's really $49!

Is there any way to achieve this behavior? Ideally like being able to create an API route / webhook to invalidate the cache by URL. Then when the data source updates, it can send that webhook to tell Next.js to purge the cache for that page.

Relevant discussion: #10721 (comment)

[michrome]

Cross linking this to #16488 which is a request for the same: regeneration based on an event, to cut short the wait for a revalidation period.

[kristijorgji]

You can do that even now by hacking through it.
I am doing a custom solution in next 11 until vercel officially provide proper hooks for it.

Just delete under .next/pages the page you want to invalidate, easy as that ;)
Then on next browser request will be re-created with latest fetch from api/db/whatever

[kimgysen]

That doesn't make sense for pages with dynamic path, for example quick corrections on news articles. You're supposed to delete them manually all day?

[alexandrosk]

Can you share a solution to this?

[rd13]

I think they are referencing this: https://stackoverflow.com/a/67943093/291600

However, this won't work on vercel.

[leerob]

I'm incredibly excited to share that Next.js 12.1 was just released, which includes on-demand Incremental Static Regeneration! We know many of you have been looking forward to this for a while, including myself, and I'm so happy it is here.

• Learn about Next.js 12.1
• Watch a demo of on-demand ISR
• View another demo and give us your feedback
• Read the documentation

[tenkkov]

@leerob How can I revalidate only the page on my static Next.js site whose data has been changed? I know that Vercel edge supports Serverless Prerendering functions that can re-check dynamic pages. For example /blog/my-post. But I have static pages on my own server. Now, if I make any changes to the cms, the webhook will cause all pages to be rebuilt. This is not exactly the behavior I want. I want to change data on a /about page, for example, in my headless cms and I only need to revalidate that /about page? How can I do this without setting a revalidate interval in getStaticProps on every page?

[yogiraj-mahajan]

@sokolenkov have you got any solution for this ? me too have the same scenario

[tenkkov]

@yogiraj-mahajan it wasn't that I had a need, but rather an opportunity to use server-side rendering technique in my project. So I decided to switch from SSG to SSR to solve this problem. Now when I create a new page in headless CMS it appears on my site almost instantly. Hope it helps

[yogiraj-mahajan]

@sokolenkov have you implemented on demand page or path based cache invalidation from Vercel server for your SSR application ?

[tenkkov]

@yogiraj-mahajan it has default, Cache-Control headers that set differently depending on how each page fetches data.