Introduction

This topic is very important once you realize and learn . It is very painful when visiting a website and experiencing a long duration of page load.

The user has a strong perception that the website was poorly designed and has a bad user experience.This will lower the traffic and be less relevant to the users. It turns out that there is a lacking piece of the puzzle that meets the bridge gap between user and web application. This technique is called Caching.

 

What is Caching ?

Technically, a cache is any temporary storage location for copies of files or data, but the term is often used in reference to Internet technologies. Almost all systems use cache in order to increase the performance like Processors , Smartphones ,Computers ,  CDN (Content Delivery Network) , Digital Equipments etc . 

 

What are Different Types of Drupal Cache?

There are different types of Drupal Cache . The most common Drupal Caches are Cache-Tags,Cache Context, Cache Max-age . You might wonder that there are multiple types of cache from Drupal. These will make the web apps to speed up the process. All these different types of caches (Cache-Tags & Cache Context) were leaves on table and stored on the database . 

 

Cache Tags

These are only strings that stored from database and lives on for the following tables (cache_page,cache_render etc.

Inside the following tables has column name tags. The values on that column are just strings that separated by whitespace. These values are auto generated when every page are accessed , incoming requests are detected .

 

Most Common Cache tags values are :

 node:111   : When specific Content that has node id 111 was updated/deleted , all the view blocks, node page ,view pages that has content of node id 111 where updated the rendered display because the cache tag of node:111 will be invalidated automatically from the Drupal system.

 node:page  : Every content that has content type Basic Page was updated/deleted , all the view blocks, node page ,view pages that has content type of Basic Page where updated the rendered display .

   node_list  : All content that has what ever belongs to content type and if this value invalidate the node_list cache tag will update the rendered display on every page that has contents .

 There are other types of cache tags but the example above are the best example to understand easily .

cache_tag

 

Cache Context

Cache context is a declarative way to engender context-dependent variations of something that requires to be cached. It means it needs to specify what kind of cache context to generate cache.

 

Example :

  1. cookies:cart   :  Every request that has associated  cookie value ‘cart’ will detected and generate cache on cache_render table and cache_page table. Inside the mentioned tables , the cache-tags were automatically generated . If the response contains data that were related under Basic Page content type , node:page cache-tags was associated.

Example: request : https://[youre_domain]/cart   cookie: cart=[{pid:1234}]

Based on the example , The user visited the Cart page which has cookie data of product_id 1234 . On the first access page  then it will render the product that has id 1234 . When you reload the page , the backend process will not anymore fetch the data from the database since its already cached and it will respond right away with the cached data.

But if you are selecting another product  https://[youre_domain]/cart   cookie: cart=[{pid:54321}] , the process were calculated from the database and created a cache.

  1. url.query_args:search  : Every request that has query name “search” detected , the cache_page table will automatically generate a new cache if its not yet .

Example : https://[youre_domain]/search/page/?search=Drupal  

Based from the example above , when the url was requested to server that has query search=Drupal , the backend process will calculate the data that needs to be rendered on browser and once it was accessed again , no calculation needed since it was already cached .

 

Cache Max-age

This kind of Drupal cache was already understandable from the title itself . It means that whatever cache was created from database , it has property that expires at a certain period of time in seconds .

Example :  When user accessed the Products List page , The dynamic contents are being calculated if not cached then it will create cached data together with timestamp to be expired on given specific time.

When another user was accessing the same page within valid time , the data is fetched from cache_page table. But if the another user was visited Product List page that has surpassed the given valid time , it will recalculate the dynamic data because the cached data was already expired.

cache_page

 

 

How to create Custom Cache Tags

Custom cache tags are used only in special cases like creating custom pages , Rest API services etc.

    $response = new CacheableJsonResponse($results);

    $cache_metadata = new CacheableMetadata();

    $cache_metadata

      ->setCacheMaxAge(60)

      ->addCacheTags([‘custom_cache_tags’])                               // backend cache

      ->addCacheContexts(['url.query_args:search']);                  // backend cache

    $response->addCacheableDependency($cache_metadata); // backend cache

    $response->setPublic();                                              // frontend cache

    $response->setMaxAge(60);                                       // frontend cache

    return $response;

The code above was perfect example for REST API type of Service . Backend cache are those leaving on Drupal Database while Frontend Cache are those leave on Browser cache. The code was simply responding through JSON response

 

How to Invalidate Custom Cache Tags

Invalidating Custom cache tags are used when there are custom page or custom route created .

The example code below was invalidating custom cache tag . The custom cache tag could be associated with view block , custom page or custom route . Once the custom cache tag was invalidated , the incoming requests will re-calculated the dynamic data and create new cache data .

    \Drupal\Core\Cache\Cache::invalidateTags(['custom_cache_tags’]);