Get Started with Next JS On-demand Revalidation

Recently Next JS introduced On-demand Revalidation. On v12.2.0 Next.js supports On-Demand Incremental Static Regeneration to manually purge the Next.js cache for a specific page.

Now you can update your site in the following cases.

• Updates content from your headless CMS.
• Creates new content is from your headless CMS.
• Ecommerce metadata like price, category, reviews, etc changes

To test this we need to disable cache in apollo-link or apollo-client. In the defeultOptions, fetchPolicy as no-cache avoids using the cache. Let’s look at the code.

Also Read: How to Build PWA with Next JS?

Next JS On-demand Revalidation

Now you don’t need to specify revalidate to use on-demand revalidation inside getStaticProps. If revalidate is omitted, Next.js will use the default value of false (no revalidation) and only revalidate the page on-demand when our revalidate function is called.

Also Read: Next JS Project Ideas to Boost Your Portfolio

Secret Token Add

First, we will create a secret token for our Next JS Site in our env file. We will need this secret to prevent unauthorized access to the revalidation API Route.

.env.local
NEXT_SECRET_TOKEN = <SECRET_TOKEN>

You can access the route with the following URL structure

https://<your-site.com>/api/revalidate?path=<SLUG>&secret=<SECRET_TOKEN>

Also Read: How to add Google AdSense in Next JS

Revalidate function

We need to create a new file in our /pages/api folder. The file name will be revalidate.js. In this file, we will define our revalidate function.

// pages/api/revalidate.js

export default async function handler(req, res) {
  if (req.query.secret !== process.env.NEXT_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    await res.revalidate(req.query.path);
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).send('Error revalidating');
  }
}

req.query.path is the actual path for the revalidated URL. For /blog/[slug] this should be /blog/post-1. If the revalidation is successful we will get a success message. And the content will be updated. If there was an error, Next.js will continue to show the last successfully generated page.

Testing on-Demand Revalidation

When running locally with next dev, getStaticProps is invoked on every request. To verify your on-demand ISR configuration is correct, you will need to create a production build and start the production server. Run the following commands to create a production build and start the server with that build.

$ next build
$ next start

Disable Cache for On-demand Revalidation

If you’re using and cache like Appolo Cache then you might not able to see the changes with revalidate. You need to disable the cache. You need to add the following to your appolo client.

const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'all',
  },
};

const client = new ApolloClient({
  link: concat(authMiddleware, httpLink),
  cache: new InMemoryCache(),
  defaultOptions: defaultOptions,
});

Then, you can confirm that static pages have successfully revalidated.