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? :-)

Aweless

Answer 1

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

Mangosteen

but let's say we have 100 pages and on all 100 pages left side we have list of options to select which stays consistent on all the 100 pages and this list is coming from database and we managing this list from admin side and updating some option name or adding one more option in that list so in this case we have to regenerate all the 100 pages to show same number of options in the list correct ? how we will handle this case – Putup

Answer 2

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

Marybethmaryellen

Thanks for your answer, I'm glad to hear this feat is in high demand, looking forward to a native solution :-) – Luther

Hey! Lee from Vercel here. If you'd like to try this feature out, please send me an email at lee at vercel.com :) – Chalcidice

Surely in order to achieve this, you simply need to clear the cache for the particular page that needs updating, and the on-demand generation will kick in upon the next request for it? – Putumayo

@Chalcidice is there some ETA when this feature will be widely available? – Butadiene

This feature is already available as explained in here: github.com/vercel/next.js/discussions/… – Footstool

It looks like on demand ISR is no longer in beta: nextjs.org/docs/pages/building-your-application/data-fetching/… – Blew

Answer 3

Nextjs On demand ISR on dynamic pages

Case = blogs page on /blogs

single blog = /blog/${slug}

// pages/api/revalidate.js
import axios from "axios";

export default async function handler(req, res) {
  try {
    // Check for secret to confirm this is a valid request
    if (req.query.secret !== process.env.REVALIDATE_SECRET) {
      return res.status(401).json({ message: "Invalid token" });
    }
    // Get all the blogs slugs
    const blogs = await axios.get(
      `${process.env.NEXT_PUBLIC_API_URL}/blogs`
    );

    const list= await blogs.data;
    const slugs = list.map((one) => one.slug);
    // Revalidate each page for each slug
    for (const slug of slugs) {
      await res.revalidate(`/blogs/${slug}`);
    }
    return res.status(200).json({ revalidated: true });
  } catch (err) {
    console.error(err);
    return res.status(500).json({ message: "Error revalidating pages." });
  }
}

Pastorship