Next.js Static Regeneration on demand

Question

I absolutely love Next.js's Incremental Static Regenration.

However, I'm looking for a way to force static pages regeneration on demand. Ideally via a command that I can trigger with an API call when the data in my source db change.

The idea is to regenerate each page just once after each data change. I could enforce ISR pages regeneration simply with fetching the target pages after their revalidation interval, but I'm looking for a way not to regenerate them redundantly until data changes.

Any ideas if it's doable and how? :-)

Answer 1

Edit
Next.js 12.1 now supports On-demand ISR (Beta)

At the moment (Next.js 10.1.3) there is no native support for this feature, the only way to trigger a page revalidation is with an interval-based HTTP request.
However Next.js team is exploring on-demand (triggered via API route) revalidation (see also https://github.com/vercel/next.js/discussions/10721#discussioncomment-686) and since this is a highly requested feature may be avaible in the future.
Here you can find an attempt for revalidate pages on demand, but it has serious caveats and is not production ready.

Sources :
Update a static page by event
super Incremental Static Regeneration

Answer 2

On Demand ISR (Update content without redeploying) is now stable in Next.js 12.2 version On-Demand ISR (Stable).

This feature allows you to create and update static pages after build time down to the per-page level without taking down the whole page to rebuild. This is useful for dynamic content such as a blogging website with a headless CMS.

That's the current implementation that I found in Next.js 12.2 documentation:

// pages/api/revalidate.js

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.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');
  }
}

Here's a live demo where you can play with this feature: On Demand ISR Demo.

Some video links that I found useful on Youtube.

Next.js 12.1: Introducing On-Demand Incremental Static Regeneration

Next.js On-Demand ISR // Full tutorial