In this tutorial, you will learn some performance tips that you can apply to the content API to help improve your website's performance. Recently, I have been working on a React SPA that is powered by the Episerver Content API. As more content was added into the CMS the performance of the content API ground to a halt. Some requests would take over 10 seconds to return. If you looked at the API's response header you will notice the cache-control header is not set by default, as you can see:
One way to fix that is to set the cache headers in the response. Within C# you create an attribute similar to this:
You can register the attribute within a WebApiConfig like this:
Just in case you did not know, you register the WebApiConfig within the 'global.ascx' like so:
Adding this will add the cache headers, however, you will notice this strange header called 'cf-cache-status: DYNAMIC'. If you look at the Cloudflare website, here, you can see that dynamic means the resource was not cached by default and your current caching configuration doesn't instruct Cloudflare to cache the resource. How come?
By default, Cloudflare/DXP is configured to only cache content that has a file extension. Assets like images that obviously have file extensions, like a png or a jpg ca be cached easily. If you want Cloudflare to respect the responses cache headers on a page or API request then you will need Episerver support to create a 'Page Rule' rule for you. The page rule can pattern match on URL so you can rules that specifically target the content API. I suggest you add rules for:
If the page rule has been set-up correctly you should see a HIT on the cf-cache-status, like so:
Armed with some caching will mean the number of requests that get sent to the origin will be dramatically reduced. You will need to figure out what cache durations you will need to add to the site.