Fragment Cache

You can cache specific parts of a page or layout using fragment caching.
One common use case is to cache fragments that take a lot of time to fetch and/or render, for example a long-running GraphQL query.

Testing the cache

You can test the cache by adding a random string and refreshing the page:

• When the page is rendered from the cache, the string remains the same.
• When the cache is invalidated (e.g. after the time specified (in seconds) in the expire property), the string changes.

app/views/pages/fragment-cache-simple.liquid

{% cache context.page.slug, expire: 10 %}
Random string: {{ 18 | random_string }}
{% endcache %}

Example

This example demonstrates rendering a lot of data (in this case generated inline, in real world, this would be fetched from the database):

app/views/pages/fragment-cache-long-running.liquid

Random string not cached: {{ 18 | random_string }} <br>

{% capture key %}{{ context.page.slug }}-v1{% endcapture %}
{% cache key, expire: 15 %}
  Random string cached: {{ 18 | random_string }} <br>
  {%- for i in (1..5000) -%}
    {%- assign r = 15 | random_string %}
    <span class="{{ r }}">{{ i }}</span>
  {%- endfor -%}
{% endcache %}

Authentication and Cross Site Request Forgery tokens

If you cache a fragment that includes a token (like an authenticity_token that's generated for a form request), then the token gets also cached. This could, for example, prevent the user from submitting a form.

platformOS automatically processes the cache and updates those tokens if you use the form Liquid tag.
If you're using JavaScript to submit forms, you can obtain the CSRF token for the current page from a cookie named CSRF-TOKEN.

Source code and demo

You can find the source code of this example on GitHub, and a demo on our examples page.