Stable Incremental Static Re-generation (Next.js 9.5+).

Sboro
Sboro
Jan 6 · 4 min read

Next.js has introduced a very handy feature called Incremental Static Re-generation from versions 9.5 and above. It has been five months now since v9.5, nonetheless, I thought the feature was really cool and I had to try it out.

What is Incremental Static Re-generation?

Incremental Static Re-generation is basically a way to update static content on your sites. As we know using methods like Static Site Generation (SSG), we can pre-render sites (fetch data at build-time) and deliver content blazingly fast. While Next.js cares about delivering content almost instantly, they equally care about handling stale data or dealing with dynamic data.

Rebuilding a website for every update could be a tedious task. The Incremental Static Re-generation feature deals with all the updates gracefully. Existing pages are updated by re-rendering them in the background as traffic comes in.

For every incoming traffic, background regeneration pushes the newly-generated page after it’s done generating, without any interruption.

We can use fallback: true option to fallback on stale version of the website when a newer version is being generated. Also, fallback is useful when someone requests a page that's not generated yet.

High-level Architecture

Here in the diagram, we can see User-1 requesting data from an endpoint (/post/1). While the request is made, User-1 immediately receives a stale response of the request (already generated data). At the same time, another request is triggered to update any data which subsequently re-generates the page with the updated data.

Incremental Static Re-generation Flow Diagram

User-2 when making the request to the same endpoint isn’t served with the stale data, since the re-generated and updated data is now available.

To enable this feature, one has to configure the interval for re-generation in the getStaticProps function of the particular page.

An Example: Reaction app

The following application demonstrates the feature of Incremental Static Re-generation. It re-generates a static page that shows the count of various GitHub reactions of a Github issue available here.

The application above is demonstrated in the Next.js blog available here. Please try it out on your own.

Code in-depth

Let us have a quick review of the code and understand how that works. The asynchronous getStaticProps method statically generates and fetches data at build time. We make a query that makes a request to a GitHub endpoint. The query resolves to the content (emoji reactions) of the issue we want to grab from a particular repository.

Querying an endpoint:

Note: To run this file locally you would need a GitHub access token. Generate one for yourself here.

Resolving request:

The code below handles the response and maps through the reactions available.

The data received is an array of objects like so. Each of these items is mapped through and the object property called ‘totalCount’ has the figure stored that indicates the total number of reactions for each emoji.

Right after, we then expose the reactions as props to be consumed by a component. We also have a revalidate count (here as 1) that indicates the number of seconds to wait from the moment a request comes in for the regeneration.

We can only imagine Next.js to skyrocket with this great feature available out-of-the-box. It’s a really cool feature and results in a fast, reliable, and secure browsing experience.

References

Originally published at https://boro-blogs.netlify.app.

The Startup

Get smarter at building your thing. Join The Startup’s +800K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store