Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables developers and content editors to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.
Static pages can be generated at runtime (on-demand) instead of at build-time with ISR. Using analytics, A/B testing, or other metrics, you are equipped with the flexibility to make your own tradeoff on build times.
Consider an e-commerce store with 100,000 products. At a realistic 50ms to statically generate each product page, the build would take almost 2 hours without ISR. With ISR, we can choose from:
Faster Builds → Generate the most popular 1,000 products at build-time. Requests made to other products will be a cache miss and statically generate on-demand: 1-minute builds.
Higher Cache Hit Rate → Generate 10,000 products at build-time, ensuring more products are cached ahead of a user’s request: 8-minute builds.
In my previous post I’ve created a JSS-Next.js app that we deployed to Vercel. I also created a Web Hook to trigger a full rebuild in Vercel (SSG). Now, I’ll explain how the ISR works in this same app.
ISR uses the same Next.js API to generate static pages: getStaticProps.
By specifying revalidate: 5, we inform Next.js to use ISR to update this page after it’s generated.
Check the src/pages/[[…path]].tsx file and the getStaticProps function:
Next.js defines which pages to generate at build-time based on the paths returned by
getStaticPaths. For example, you can generate the most popular 1,000 products at build-time by returning the paths for the top 1,000 product IDs in getStaticPaths.
With this configuration, I’m telling Next.js to enable ISR and to revalidate every 5 sec. After this time period, the first user making the request will receive the old static version of the page and trigger the revalidation behind the scenes.
- Next.js can define a revalidation time per-page (e.g. 5 seconds).
- The initial request to the page will show the cached page.
- The data for the page is updated in the CMS.
- Any requests to the page after the initial request and before the 5 seconds window will show the cached (hit) page.
- After the 5 second window, the next request will still show the cached (stale) page. Next.js triggers a regeneration of the page in the background.
- Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page remains unaltered.
Here’s a high-level overview of the routing process:
In the diagram above, you can see how the Next.js route is applied to Sitecore JSS.
The [[…path]].tsx Next.js route will catch any path and pass this information along to getStaticProps or getServerSideProps on the context object. The Page Props Factory uses the path information to construct a normalized Sitecore item path. It then makes a request to the Sitecore Layout Service REST API or Sitecore GraphQL Edge schema to fetch layout data for the item.
So, back to our previously deploied app in Vercel, login to Sitecore Content Editor and make a change on a field. I’m updating the heading field (/sitecore/content/sitecoreverceldemo/home/Page Components/home-jss-main-ContentBlock-1) by adding “ISR Rocks!”. We save the item and refresh the page deployed on Vercel. (Don’t publish! this will trigger the webhook that is defined in the publish:end event).
After refreshing the page, I can still see the old version:
But, if I keep checking what is going on in the ngrok, I can see the requests made to the layout service:
So, after refreshing again the page, I can see the changes there!
So, it got updated without the need of rebuilding and regeneating the whole site.
That’s it! I hope this post helps to understand how the ISR works and how to start with it on your Sitecore JSS implementation.
Thanks for reading and stay tuned for more Sitecore stuff!