Understanding The Craft CMS Native Cache Tag

Understanding when and how to use the cache tag can greatly improve the performance of your site.

Why Cache?

When a user requests a page on your site, the server has to perform a number of tasks to generate the page: it has to fetch the content from the database, apply any necessary transformations (such as applying Twig templates), and then send the resulting HTML back to the user's browser.

This process can take a significant amount of time, especially if the server is under heavy load or the content is particularly complex.

By using caching, you can store the generated HTML for a particular page in a cache and serve it to subsequent requests without having to go through the process of generating it again. This can greatly reduce the amount of time it takes to serve a page to a user, improving the overall performance of your site.

There are several different methods available for implementing a cache, for this specific article we are going to learn about the baked in system in craft the {% cache %} tag

The basics

{% cache %}: This tag marks a block of content to be cached. The content inside the tag will only be rendered once and subsequent requests will be served the cached version.

{% cache globally %}: This tag works the same as the {% cache %} tag, but the cached content will be shared across all sites in a multi-site setup.

{% endcache %}: This tag closes a {% cache %} or {% cache globally %} block.

Here is an example of how you might use these tags in a Twig template:

{% cache %}
    <h1>Latest Blog Posts</h1>;
    {% for post in posts %}
        <h2>{{ post.title }}</h2>
        <p>{{ post.excerpt }}</p>
    {% endfor %}
{% endcache %}

In this example, the <h1> and <h2> tags, as well as the post.title and post.excerpt variables, will be cached and served to subsequent requests without being re-rendered.

You can also specify a cache expiration time using the {% cache %} and {% cache globally %} tags. For example:

{% cache globally for 1 hour %}
    <h1>Latest Blog Posts</h1>;
    {% for post in posts %}
        <h2>{{ post.title }}</h2>
        <p>{{ post.excerpt }}</p>
    {% endfor %}
{% endcache %}

To cache or not to cache that is the question

The {% cache %} tag is a useful tool for improving the performance of your site by reducing the amount of time it takes to generate certain parts of a page.

However, there are certain situations where you may not want to use the {% cache %} tag. Here are a few examples:

If the content of a page is highly dynamic and changes frequently, you may not want to cache it. For example, if you have a page that displays the latest news headlines, you may not want to cache the page because the headlines will change frequently and you want users to see the most up-to-date content.
If the content of a page is personalized for a specific user (such as showing a user's name or recent activity), you may not want to cache it. Caching the page would result in all users seeing the same personalized content, which may not be what you want.
If the content of a page is sensitive or private (such as a user's account settings), you may not want to cache it. Caching the page could result in other users seeing the sensitive content if they are served the cached version of the page.

In general, you should use the {% cache %} tag with caution and carefully consider whether caching is appropriate for the content of your page.

Cache Using a Key

You can specify a key for the cache using the key parameter. The key should be unique for each version of the cached content that you want to store. For example:

{% cache using key "my-unique-cache-key" %}
  ... content to cache ...
{% endcache %}

The key can be a simple string, or it can include variables or tags. For example:

{% set key = "my-cache-key-" ~ entry.id %}
{% cache using key key %}
  ... content to cache ...
{% endcache %}

Using a key allows you to manually invalidate the cache when needed. For example, if you have a form that updates a database record, you can use the {% cache %} tag to cache a listing of those records, and specify a key that includes the ID of the record being updated. Then, when the form is submitted, you can use the {% expire %} tag to expire the cache for that key, which will cause the cached content to be regenerated the next time it is accessed.

{% cache using key "record-listing-" ~ entry.id %}
  ... cached content ...
{% endcache %}

...

{% set key = "record-listing-" ~ entry.id %}
{% expire using key key %}

Still Having Trouble?

If you are still having trouble understanding how to use the {% cache %} tag in Craft CMS, please don't hesitate to reach out to us for help. We are here to assist you and answer any questions you may have. Don't let caching confusion hold you back from improving the performance of your site!