Incremental Static Regeneration in Next.js with Strapi

Learn how Strapi implemented Incremental Static Regeneration in Next.js combined with the webhook feature for near-instant updates. Discover how Cloudfront caching and revalidation routes were used for improved website performance for users.

Author: Maxime Castres

As the web development industry continues to evolve, the need for faster and more efficient ways to update the content of a website has become increasingly important. At Strapi, we’ve implemented a solution that combines the power of Next.js and Strapi to achieve near-instant updates to our website, which is built using Static Site Generation (SSG) technology.

The key to our solution is the use of Incremental Static Regeneration (ISR) in Next.js. ISR allows for only the specific pages that have been updated to be regenerated, rather than the entire site. This greatly reduces the time it takes to update the content on our website. In fact, we have + 1000 pages on our website and if you update only one page, you’ll need to build everything to see your changes which takes quite some time (~10min).

To further improve the efficiency of our updates, we’ve integrated the webhook feature of Strapi. This allows us to automatically trigger a regeneration of the affected pages whenever new content is added, updated, deleted, published, or unpublished in our Strapi backend. The webhook URL looks like this: https://domain.com/revalidate?token=xxx

The token is used to secure this API call. It should be the same on Strapi and on Next.js to proceed.

We also implemented the option to manually revalidate specific pages inside the webhook. In fact, it might be useful in certain scenarios. Let’s say that you update the title of a blog post. In our implementation, Next.js will automatically revalidate the /blog/specific article page but this article, and more specifically the title might appear somewhere else like the /blog page! This page will also need to be revalidated to show the new title. This is why in the webhook you can add a page parameter that allows you to specify a page that you want to manually revalidate by triggering the webhook manually https://domain.com/revalidate?token=xxx&page=/blog.

One more thing, our entire website is cached using Cloudfront, which helps to greatly improve the load times for our users. To ensure that the updated content is always displayed to our users, we’ve also implemented a step in the revalidate route in Next.js that automatically invalidates the cache on Cloudfront when a page is regenerated.

In conclusion, the combination of ISR in Next.js, the webhook feature of Strapi, and the use of Cloudfront caching has allowed us to achieve near-instant updates to our website while also improving the overall performance of our users.

PS: This article was mostly generated using ChatGPT, impressive right? Here is the prompt:

Can you write a blog article about how, at Strapi, we implemented Incremental Static Regeneration on Next.js combined with the webhook feature of Strapi to automatically and almost instantly update the content of our website which is using the SSG technology? Can you also add that our entire website is cached using Cloudfront and that the revalidation route that we call in Next.js is also invalidating the cache on Cloudfront?