ISR stands for Incremental Static Regeneration β a mouthful I know, but this is something that will take your Next.js apps to the next level.
When building a site where most (if not all) of your pages are being statically generated, you may run into long build times. This can suck if you need to make a small change but you have to wait that long period of time to rebuild the site in its entirety. This is where ISR comes into play!
When choosing to implement ISR, there are 2 main benefits that you need to choose from β this can impact your end-users experience. You want to decide whether you want faster builds or more caches. Let's talk more about these two in-depth:
Faster Builds
How can we achieve faster builds? The easiest way is to reduce the number of pages that have to be built! For our guestbook example (I'll discuss this later), everyone that signs the guestbook has their own page /guest/{username}
. If 10,000 people sign the guestbook, it could take some time to build all those pages. Instead, we can build a subset of those 10,000 pages to get faster build times. Let's say at build time, we'll only build pages for the 500 guests who sign the guestbook the most. This will drastically reduce the time it takes to build our site since we reduced the number of pages we're building.
Cache More
We may decide we want more pages to be readily available and accessible to our users β that's when we'd choose this approach. This simply means that we increase the number of pages we generate at build-time. For instance, instead of generating the 500 guests who sign the guestbook the most, we can increase that to 1,000! This allows users to view more static content whilst keeping our overall build times relatively fast.
You may want to do this if you have an e-commerce store where you want to show the most searched products quickly. By caching more products, your users get fast page loads for common and expected results β¨
You may be wondering "what about the other 9,000+ pages?" β this is a super valid question with a super valid answer π
. This is where the power of ISR comes into play: the other 9,000+ pages can be generated on-demand by specifying a fallback
option. This option enables different behaviors for those pages that haven't been generated yet.
- When set to
"blocking"
, the page will be server-side rendered. - When set to
true
, a loading state will be displayed until the page re-renders with the fetched data.
It's important to note that regardless of what
fallback
option you choose, future requests to those pages will be served from the cache.
What does ISR look like?
This is my favorite part, seeing it in action! I built a little something cool that should supplement what you just read β it's a guestbook* that is statically generated and has dynamic routes for guests where you can see their last message. Check it out here β¨
I like this diagram because it showcases at what point ISR kicks in and saves the day β at the revalidation marker! What I want you to do is sign in, leave a message and let's talk about what you might experience. Initially, you might not notice anything but wait about 60 seconds...
In the meantime, follow me on Twitter if you're not already π
Okay, we're back! Refresh the page and you should see your message at the top of the guestbook! Exciting, right? We updated a statically generated page without having to rebuild the entire site β this is major and all thanks to ISR! Wanna see it again? Try clicking on your message, it'll take you to your unique page where people can see the last message you left. You should see the message you just created. Leave another message, go back to your guest page, and wait a bit (60 seconds at most). You'll see your new message on your guest page!
It's important to note that this entire site is statically generated, yet we're able to deliver updated and dynamic content to our users β¨
Wrap up
I won't go over everything you can utilize ISR with, I just wanted to show it off a bit because it truly is a game-changer! If you add ISR to your app, I'd love to know what you use it for; give me a shout on Twitter! Also, if you're interested in the code for the guestbook, you check it out here.
* guestbook: a way for a visitor to acknowledge they visited a site and leave details such as their name or comment.
β€οΈ Open Source Software