Introduction
Hey there! Today, we’ll get into understanding a very beautiful and powerful concept called Incremental Static Regeneration, lovingly also known as ISR.
Don’t worry if that sounds like a spell from a wizard’s book – by the end of this post, you’ll not only understand what is ISR but also wield the power of SSR and caching headers like a pro. Ready to brew some magic? Let’s go!
A Peek at Incremental Static Regeneration (ISR)
Picture this: a website that’s both fast and dynamic. That’s the power of Incremental Static Regeneration.
ISR takes the idea of Static Site Generation (SSG) to the next level by generating static pages on-the-fly, dynamically updating content without sacrificing speed.
Did you know that Reddit used ISR for optimising the r/place using Fastly CDN and caching the requests for 1 second! Read more about it on their engineering blog ↗️
The SSR Enchantment
Server-Side Rendering (SSR) is like having a real-time spellchecker for your website. Unlike traditional client-side rendering, where browsers do all the heavy lifting, SSR does the rendering on the server before sending it to the client.
This means your visitors see a fully loaded page right from the start, and search engines can index your content easily.
Harnessing Cache Headers
Now, let’s sprinkle some magic with cache headers. Cache headers tell browsers (or shared caches like CDNs) how long they can cache content. We achieve this by using the cache headers like max-age or s-maxage. But there’s a twist – with ISR, we don’t want to serve outdated content.
Enter cache control header stale-while-revalidate – this option allow browsers (or CDNs) to serve cached content while simultaneously fetching updated data in the background.
This means faster load times and constantly fresh content.
Implementation in Action
Ready to weave this wizardry into your website? Here’s a quick guide:
Configure SSR
Set up SSR for your website. There are many frameworks like Next.js, Astro etc. make this remarkably smooth.
These are some of their links on how to setup SSR in Next ↗️, or Astro ↗️ or any other framework that might support it.
Craft Cache Headers
Implement cache headers that suit your content. For example if you want to cache the content for 15 minutes you can use max-age=900 to cache on browser or s-maxage=900 for shared caches.
Use "stale-while-revalidate" to combine speed and freshness. I found this video to be very helpful in understanding these different cache headers.
Video by Ryan Florence on YouTube ↗️
Dive into ISR
Identify the parts of your website that can benefit from ISR. This can be blog posts which changes frequently, news sections, or product listings etc.
Basically the idea is that you want to pick a page or types of pages which more or less have some content that changes dynamically but with some time.
Another good candidate could be for some pages where you are fetching records from database or some third party service which bills you based on the number of API calls, and you want to avoid making too many API calls.
So take some time and go through your app and determine what all pages can benefit from ISR.
Once you have identified it, you can start implementing the requires changes, again this will depend on the framework you are using but at the basic level you have to enable SSR on that page and use cache headers to cache the page for some time.
Deploy and Observe
Deploy your enchanted site and witness the magic unfold. Monitor how pages load faster and content stays up-to-date.
If you have some sort of logging in place, then that would be a good place to start monitoring for how many times the page is being revalidated or the difference between the number of times the page is being served from cache vs the number of times it is being revalidated.
Optimize and Iterate
Like any spell, practice makes perfect. Experiment with cache durations and fine-tune your ISR strategy for optimal results.
You might find yourself in situation where you either cached too aggressively or not enough, so you can always go back and change the cache headers to suit your needs.
One thing to keep in mind is that in case you are in doubt of how long do you want to cache, always pick a lower duration.
You do not want to cache aggressively first and then realise that you have to invalidate the cache and then wait for the cache to expire.
Check out this example repository to see ISR in action with Astro + Cloudflare Workers ↗️ and the live demo ↗️
Conclusion
Congratulations! You’ve uncovered the art of Incremental Static Regeneration, armed yourself with SSR’s speed, and adorned your website with cache headers’ freshness.
Your site is now a dynamic masterpiece that loads in a flash and keeps visitors spellbound with the latest content. So go forth, wield this newfound magic, and enchant the digital world with your web creations!