DEV Community

Cover image for Next.JS - How to Implement Incremental Static Regeneration (ISR)
Jay @ Designly
Jay @ Designly

Posted on • Originally published at


Next.JS - How to Implement Incremental Static Regeneration (ISR)

We all love Next.JS for its ability to render static pages for our dynamic content. Previously, when new content was added, one had to completely rebuild the site, but no longer!

Introducing: Incremental Static Regeneration, or ISR. ISR allows only a specific page to regenerate in the background when changes are detected. There are two ways to implement this feature: automatic regeneration and on-demand regeneration. I will cover both methods.

Automatic Regeneration

Automatic regeneration is handled by the Next functions getStaticProps() and getStaticPaths(). To implement ISR, we only have to worry about two lines of code:

/* [slug].js */

export async function getStaticProps({ params }) {
    const res = await getPost(params.slug)

    return {
        props: {
            post: res[0].fields
        revalidate: 10 // Revalidate max 10 seconds

export async function getStaticPaths() {
    const slugs = await getPostSlugs();

    const paths = => ({
        params: { slug: slug },

    return {
        fallback: 'blocking' // SSR page and then cache
Enter fullscreen mode Exit fullscreen mode

I've added the revalidate: 10 directive to getStaticProps(). This means that stale content will only be displayed for a maximum of 10 seconds, and then is revalidated and rebuilt in the background. The next refresh after this time expires will display the current content.

In getStaticPaths(), I've set fallback to blocking. What this does is, if the current path does not exist, it is Server-Side Rendered. Subsequent renders will be served from the cache from then on.

That's it! It's that simple.

On-Demand ISR

You may want to consider on-demand ISR, especially if you want new content to be live immediately. Let's say you have an eCommerce store and you want to change the price of a product. We'll create an API path that will allow us to regenerate a path or list of paths on demand. We'll use a secure API key to prevent abuse.

Here's the code for my API:

/* revalidate.js */

export default async function handler(req, res) {
    // Get our API key from 'authorization' header
    const bearer = req.headers['authorization'];
    if (!bearer) return res.status(401).json({ message: 'Unauthorized' })
    const key = bearer.split(" ").pop();

    // Compare given key to secret key
    if (key !== process.env.REVAL_SECRET) {
        return res.status(401).json({ message: 'Unauthorized' })

    // Get paths array from POST request
    const paths = req.body.paths ?? null;
    if (!paths || typeof paths !== 'array') return res.status(400).json({ message: 'Bad Request: No paths specified' })

    try {
        paths.forEach(async (p) => {
            await res.unstable_revalidate(p)
        return res.json({ revalidated: true })
    } catch (err) {
        // Catch error and serve 500
        return res.status(500).send('Error revalidating')
Enter fullscreen mode Exit fullscreen mode

Now we can test this by sending a request to the API:

/* Revalidate Request Example */

const axios = require('axios');

const postData = {
    paths: [

const res = await axios({
    headers: {
        'Authorization': `Bearer ${process.env.REVAL_SECRET}`
    method: 'POST',
    url: '/api/revalidate',
    data: postData
}).then((res) => {
    return res
}).catch((e) => {
Enter fullscreen mode Exit fullscreen mode

That's all there is to it. This new(ish) feature has completely solidified my committment to Next.JS. I hope you feel the same way!

For more great information, please Visit Our Blog.

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.