Next.js 9.5: Incremental Static Regeneration (ISR) is a Game Changer

In 2020, we've been stuck in a binary choice: Static Site Generation (SSG) for speed, or Server-Side Rendering (SSR) for fresh data. SSG is great, but rebuilding 10,000 pages because one price changed is a nightmare.

Enter Incremental Static Regeneration (ISR) in Next.js 9.5.

What is ISR?

ISR allows you to update static content on a per-page basis, after you've built your site. You get the benefits of static (global CDN caching, instant TTFB) with the flexibility of dynamic data. No more choosing between speed and freshness.

How to use it: The revalidate Prop

All you have to do is add a revalidate property to your getStaticProps function. This tells Next.js how often it should attempt to regenerate the page in the background.

// pages/products/[id].js

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return {
    props: {
      product,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 60 seconds
    revalidate: 60, 
  };
}

export async function getStaticPaths() {
  return {
    paths: [], // Don't pre-build everything at build time!
    fallback: 'blocking', // Build on-demand and cache
  };
}

The "Stale-While-Revalidate" Pattern

When a user hits a page:

1. If the page was built < 60s ago, show the cached version.
2. If > 60s, show the stale cached version, but trigger a background rebuild.
3. Once the rebuild is done, the cache is updated for the next user.

This is the ultimate performance win. The user never waits for a data fetch.

Why 2020 is the year of the "Hybrid" Web

With ISR, Next.js is moving away from being "just a React framework" to being a full-on web delivery platform. We can now build massive e-commerce sites or news portals that are 100% static but always up-to-date.

Static is no longer still. It’s moving.

Aunimeda develops websites and web applications for businesses - corporate sites, e-commerce, portals, and custom platforms.

Contact us to discuss your web project. See also: Web Development, E-commerce Development