How to refresh occasional changes with getStaticProps() in next.js?

Question

Here's a scenario;
I am adding some static pages in Next.js, so using getStaticProps() sounds good.

But, a user(admin) can also update [from an admin console] the content of these page in future, not very frequently.

So, Is there any way to refresh or re-deploy the pages only after the changes happen? or, if We can add a button on admin console to refresh/re-deploy after changes!?

Update: All the Page Content is getting stored in Database, and Next.js fetch the data from DB during build process.

My Approach:

1. use revalidate with getStaticProps(). But, it also doesn't gurantee immediate update, and importantly, causes unnecessary revalidation, as the changes are rare.

2. Use getServerProps()
   As already said, the changes are occasional, it doesn't sounds best to me to use getServerProps().

Thanks!

Answer 1

This is now possible, using On Demand Revalidation, as of NextJS v12.1. However, On Demand Revalidation is still in beta as of the writing of this answer. On Demand Revalidation is documented here. You simply create a revalidation api endpoint and then call it passing a known secret.

Here is the sample api endpoint from the documentation:

    export default async function handler(req, res) {
      // Check for secret to confirm this is a valid request
      if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
        return res.status(401).json({ message: 'Invalid token' })
      }
    
      try {
        await res.unstable_revalidate('/path-to-revalidate')
        return res.json({ revalidated: true })
      } catch (err) {
        // If there was an error, Next.js will continue
        // to show the last successfully generated page
        return res.status(500).send('Error revalidating')
      }
    }

Then to force revalidation of the content you would simply call this api endpoint like this:

https://<your-site.com>/api/revalidate?secret=<token>