Incremental Static Generation (ISG) with Next.js

credits: https://themefisher.com/best-static-site-generators

Static Site Generation (SSG) addresses the majority of the concerns of SSR and CSR strategy but is suitable for rendering mostly static content. It poses limitations when the content to be rendered is dynamic or changes frequently.

If you haven't read my previous article about Static Site Generation (SSG) strategy with Next.js I would strongly recommend going through it once and then continuing with this article as it will help you grasp the concept as a whole and understand why ISG came into existence.

Think of a growing blog with multiple posts. You wouldn’t possibly want to rebuild and redeploy the site just because you want to correct a typo in one of the posts. Similarly, one new blog post should also not require a rebuild for all the existing pages. Thus, SSG on its own is not enough for rendering large websites or applications.

The Incremental Static Generation (ISG) pattern was introduced as an upgrade to SSG, to help solve the dynamic data problem and help static sites scale for large amounts of frequently changing data. ISG allows you to update existing pages and add new ones by pre-rendering a subset of pages in the background even while fresh requests for pages are coming in.

Incremental Site Generation (ISG) helps in 2 scenarios to incrementally introduce updates to an existing static site after it has been built.

1. Allows the addition of new pages to your website.
2. Allows updates to existing pages of your website also known as Incremental Static “Re” generation

Addition Of New Pages

One of the popular concepts called lazy loading is used to include new pages on the website after the build is completed. This means that the new page is generated immediately on the first request. While the generation takes place, a fallback mechanism i.e page or a loading indicator can be shown to the user on the front-end client. Compare this to the SSG scenario where the 404 error page was shown here as a fallback for non-existent pages on the website.

Let us now look at the Next.js code below required for lazy-loading the non-existent page with ISG.

// In getStaticPaths(), you need to return the list of
// ids of product pages (/products/[id]) that you'd
// like to pre-render at build time. To do so,
// you can fetch all products from a database.
export async function getStaticPaths() {
  const products = await getProductsFromDatabase();

  const paths = products.map((product) => ({
     params: { id: product.id }
  }));


  // fallback: true means that the missing pages
  // will not 404, and instead can render a fallback.
  return { paths, fallback: true };
}

// params will contain the id for each generated page.
export async function getStaticProps({ params }) {
  return {
    props: {
      product: await getProductFromDatabase(params.id)
    }
  }
}


export default function Product({ product }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  // Render product
}

Here, we have used fallback: true. Now if the page corresponding to a specific product is unavailable, we show a fallback version of the page, eg., a loading indicator as shown in the Product function above. Meanwhile, Next.js will generate the page in the background. Once it is generated, it will be cached and shown instead of the fallback page.

The cached version of the page will now be shown to any subsequent visitors immediately upon request. For both new and existing pages, we can set an expiration time for when Next.js should revalidate and update it. This can be achieved by using the revalidate property as shown in the next section.

Update Existing Pages of Website

credits: https://devsblog.vercel.app/blogs/c5b4105a-203a-4a96-a8c4-ca5cce4bd496

To re-render an existing page, a suitable timeout is defined for the page. This will ensure that the page is revalidated whenever the defined timeout period has elapsed. The timeout could be set to as low as 1 second. The user will continue to see the previous version of the page, till the page has finished revalidation.

Thus, ISG uses the stale-while-revalidate strategy where the user receives the cached or stale version while the revalidation takes place. The revalidation takes place completely in the background without the need for a full rebuild.

Let's head back to our example of generating a static listing page for products based on the data in the database. To make it serve a relatively dynamic list of products, we will include the code to set the timeout for rebuilding the page. This is what the code will look like after including the timeout.

// This function runs at build time on the build server
export async function getStaticProps() {
  return {
    props: {
      products: await getProductsFromDatabase(),
      revalidate: 10, // This will force the page to revalidate after 10 seconds
    }
  }
}

// The page component receives products prop from getStaticProps at build time
export default function Products({ products }) {
  return (
    <>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </>
  )
}

The code to revalidate the page after every 10 seconds is included in the getStaticProps() function. When a request comes in the available static page is served first. Every 10 secs the static page gets refreshed in the background with new data. Once generated, the new version of the static file becomes available and will be served for any new requests in the subsequent minute.

This feature is available in Next.js 9.5 and above.

Advantages of Incremental Static Generation (ISG)

Incremental Static Generation (ISG) is an extension of Static Site Generation (SSG) that allows for dynamic content to be updated at build time, without regenerating the entire site. Here are some advantages of using ISG:

1. Faster builds: ISG allows for faster build times by only updating the content that has changed since the last build. This can be especially useful for sites with large amounts of dynamic content that change frequently.
2. Improved SEO: ISG allows for faster content updates, which can improve search engine rankings by providing fresher content.
3. Improved user experience: ISG allows for more dynamic content to be pre-rendered at build time, which can improve the user experience by reducing the need for client-side rendering.
4. Lower costs: ISG can reduce server costs by allowing for more content to be pre-rendered at build time, reducing the need for server-side rendering.
5. Improved scalability: ISG allows for more content to be pre-rendered at build time, which can improve scalability by reducing the load on the server.

Overall, ISG offers many benefits over traditional SSG, especially for content-driven websites that require frequent updates. It allows for faster builds, improved SEO, and a better user experience while reducing costs and improving scalability.

Disadvantages of Incremental Static Generation (ISG)

While Incremental Static Generation (ISG) has many advantages, there are also some potential disadvantages to consider:

1. Increased complexity: ISG can add additional complexity to the build process, especially if there are many different types of dynamic content that need to be updated.
2. Longer build times: While ISG can speed up build times for content that has changed, it can also increase overall build times if there are many types of dynamic content that need to be updated.
3. Server-side dependencies: ISG relies on server-side dependencies to generate dynamic content at build time. If these dependencies change, it can affect the build process and potentially break the site.
4. Limited real-time updates: While ISG allows for dynamic content to be updated at build time, it is still limited to the frequency of the build process. This means that real-time updates, such as user-generated content, may not be reflected on the site immediately.
5. Potential for stale content: ISG relies on the build process to update dynamic content. If there are issues with the build process, it is possible for content to become stale or outdated.

Overall, while ISG offers many benefits, it may not be the best fit for all use cases. It is important to consider the complexity of the build process, the potential for longer build times, limitations on real-time updates, and the potential for stale content.

That’s it for this article hope you would have learned something useful from it. So If you have any thoughts or suggestions, feel free to leave a comment below. Don’t forget to share your love by clapping for this article as many times as you feel like.

You can follow me on Twitter, Github, LinkedIn, and Facebook.

Happy Coding 👨‍💻 🎊.