In this tutorial, you will learn about a caching technic called donut caching. In this guide, you will learn more about how the output cache works within an Episerver CMS-powered website. The output cache is great if you simply need to do page-level caching. What happens if you need to be more fine-grained in your caching approach? If you are building an Episerver CMS-powered website, performance matters to you, and you want to be able to tweak exactly what elements on your page get cached and for how long, read on 🔥🔥🔥
As a disclaimer, this tutorial will focus on theory. If you want to implement a chance, there are links contained within this tutorial that will sort you out 💥
Caching Strategies Explained
When building a website there are several caching strategies that you can use. The caching strategy that is most appropriate for your project will depend on what you need to cache and for how long. In this section, I will go over the main strategies you can use.
Full Page Caching: On most projects, you may be happy to simply cache the whole page in one big hit. If you are happy with full-page caching, you need to enable the cache by making some small configuration tweaks within your web.config. After enabling the cache, you can use the OutputCache attribute on your Episerver page-type controllers to dictate which pages should be cached.
For most basic brochureware type sites, this is the cache strategy I would recommend. If you would like how to use this cache on your project, I recommend reading Episerver Caching - The Output Cache Explained 😊
Partial Page Caching: In certain situations, caching a whole page might not be appropriate. For example, in an e-commerce project, the price of an item might change very frequently, however, the HTML skeleton that makes up the page night change very in-frequently. Invalidating every page that could reference that product and its price might mean invalidating the majority of your cache.
Let's think about a real-life example. Say your website has 20 different languages and the product in question could appear on the homepage, a PDP page, multiple PLP pages as well as a recommended product banner throughout the site. When you update the price of your product, you have a dilemma. First, you have to track where the product is displayed. Next, you need to invalidate all of these pages. Let us say 20 pages on 5 language versions, this means purging 100 pages from the cache. Tracking and purging which pages you need to clear is a complex task. One easy solution is to just purge your whole cache whenever a price changes. This is sub-optimal as it could cause a stampeding herd effect whenever you purge.
Instead of caching the whole page, we could use something called a donut cache. A donut cache allows you to cache certain parts of a page by in essence poking holes around certain elements within your cached page. You can choose to either cache the holes with a different strategy or, maybe even not cache the holes at all. If you have pages that contain a mix of long-lived and short-lived data, a donut cache can simplify your caching stratergy. Instead, of invaliding the whole cache or trying to build a complex cache invalidation system, you create a donut hole around the pricing elements on a page and set the holes cache timeout to expire after 15 minutes. This way the prices will always be current and you do not need to purge the entirety of your cache frequently.
Donut caching comes in two flavours:
Donut Caching: In donut caching, you cache the whole page except the areas that change very frequently.
Donut Hole Caching In donut hole caching, you never cache the full page, instead, you cache parts of a page. In general, if you add the output cache attribute to one or more of your blocks, you are using a donut hole approach.
Donut Caching in Episerver
Now you have a clear idea about the different cache strategies, it is up to you to decide which solution is most relevant to your website. In general, it's this trade-off between short-lived and long-lived data that will determine the strategy. If you have pages that rarely ever update, full-page caching is usually your best option. If you have an e-commerce site powered using Episerver Commerce and you want your prices displayed in real-time, donut caching is your best bet.
If after reading this you have decided to go with a donut based approach, I would recommend reading, Episerver Donut caching. Good Luck and Happy Coding 🤘
