Incremental Static Regeneration with Next.js

This past Monday saw the stable release Next.js 9.5. Included in this release were a number of great new features, one of which was support for incremental static regeration.

In this post we're going to take a closer look at this feature and then work through an example of how you can make use of it with LexasCMS.

What is Incremental Static Regeneration?

Incremental static regeneration is a feature that enables you to keep statically generated pages up to date without requiring a full rebuild of your website and without affecting response times.

This is achieved by re-rendering pages in the background as traffic flows through your website. When a visitor requests a page, they are served the current (potentially stale) version of that page.

Once the request has been fulfilled and provided that the configured revalidation time has elasped, Next.js will regenerate the page and pull in any content changes that may have occurred since the page was last generated.

How can I use it?

Enabling this feature is actually very easy (🎉) and simply requires you to return the revalidate key from your page components getStaticProps method.

The revalidate key accepts an integer which represents the minimum number of seconds to wait between each re-generation of the page.

Learn by Example

To showcase how simple it is to use, we're going to update the Next.js blog example project for LexasCMS to enable incremental static regeneration.

If you'd like to follow along, you'll first need to create a new space within your LexasCMS account.

After you've created and opened your new space, select the 'Blog Starter Template' and then create a couple of example blog posts. If you don't yet have a LexasCMS account, you can create one here.

Start by cloning the example-next-blog repo and installing its dependencies by running yarn install within the repo's directory.

Open the pages/index.js file, locate the getStaticProps method and then add the revalidate key with a value of 1 to the object being returned.

Your code should look something like the below example:

export async function getStaticProps() {
  // Fetch blog posts from LexasCMS
  const result = await request({ query: blogPostsQuery });
  // Return props
  return {
    revalidate: 1,
    props: {
      blogPosts: result.blogPostCollection
    }
  };
}

Build the project using the below commands, being sure to provide your space ID:

export LEXASCMS_SPACE_ID="YOUR SPACE ID"
yarn build

Run the below command to start the Next.js server:

yarn start

With the server running, you should now be able to visit http://localhost:3000 where you should find a blog which lists the post(s) that you created earlier 🙌

Now comes the exciting bit!

If you go back into your space in LexasCMS and modify the title of one of your example blog posts, after a few seconds and a couple of page refreshes the pages content should have updated to reflect the changes that you made.

Congratulations! You just incrementally regenerated a statically generated page 💪

It is worth noting that this example only enables the incremental regeneration feature on the index page of your blog.

Having said that, if you're feeling adventurous, there is nothing stopping you from going further and updating the rest of the pages to enable this cool new feature.