Caching in Magento2(Adobe Commerce) tips and tricks:

While in development many times Magento caching can become a pain and each time you make any changes you have to clean or flush the cache and run static content deploy.

I am going to share some tips and tricks that I used while in Magento 2 development to overcome these time-consuming steps.

Let me give a brief explanation of caching itself then we will move on to our topic, Magento is a highly scalable system.

Here you have the luxury to easily change the behavior of any functionality without even changing anything in the core so every customization can be separated in each Magento 2 module without even touching the core files.

But all this comes with a price which is speed, to solve this Magento uses caching, caching simply means once an output is generated from an expensive function it must be preserved and returned back.

If the same function is called again so the second time system won’t run and already saved result will be served which makes the system much faster in second time execution.

There are different ways of achieving this in Magento by using FPC, varnish, redis, etc, we will learn all these things in different blog articles.

Signing Static Files:

In the image you can see this setting in store > configurations > Advanced > Developer, if this setting is yes then all the static files loading on the front end are signed which simply means that you will find a version number added in the static files URL, it affects browser caching.

The version number only changes when we run the below command in Magento2 :

php bin/magento setup:static-content:deploy

after running above command version number changes and the browser gets a fresh file URL and it fetches directly from the server not from the browser caching.

version number is saved in a file located here:

MAGENTO_ROOT/pub/static/deployed_version.txt

While in development you can open this file in the editor and after making any changes to the static files.

You can simply change the version number in deployed_version.txt and reload the page all the changes will reflect without running static content deploy but the Magento should be in the developer mode.

Frontend Workflow

The above setting is very useful when you are working on a theme and you need to write less css, each time you make any changes in the less file you need to run the static content deploy command to reflect those changes on the front-end.

There are two useful methods to do that, first one is using grunt js.

Another way is to change the “Frontend Development Workflow” to “Client Side less compilation” That way each time you will refresh the frontend less will compile automatically without running any command. This is very helpful and does not require any extra installations or settings.

If FPC (full page cache) or varnish is enabled

If you are working on a client site and all the caching is enabled after making any changes if you want to verify it, you need to flush or clean Magento cache and also reload web server to purge varnish cache that is very time taking and not very elegant.

instead you can simple add a query string in the URL like this :

https://magento-url/any-page/?RANDOM_QUERY_STRING

this way URL is changed and Magento FPC and varnish will consider it a fresh page and will send the request to the server instead of returning a cached page and you can easily verify the changes you have made are working or not.

Purging Varnish Cache

Lets understand what is varnish, it is a reverse proxy server which sits on the server side and all the http requests comes to the server through it.

If the request is already cached on the varnish it will not sent it to the server and return the response directly to the client because of that it is also called http accelerator.

Working with varnish can be tricky if you don’t understand it better you will face a lot of challenges in development. If Magento is in developer mode then you can check if varnish is properly working or not by simply running this curl command:

curl -I -v –location-trusted ‘https://magento-url/’

this will return below Headers :

X-Magento-cache-debug: MISS

and if varnish is setup perfectly second time you will check it will return

X-Magento-cache-debug: HIT

now to purge all the varnish cache on the server you will have to restart the varnish server this is the easiest way to purge all the cache here is the command:

service varnish restart

but if you want to only purge specific URL, you can do that too using below curl request :

curl -I -X PURGE -H "X-Magento-Tags-Pattern: .*" https://magento-url/

but this will only work if you have downloaded the varnish configurable file from varnish configuration :

and replaced it with default.vcl file located in(location can be different according to linux distribution you are using) :

etc/varnish/default.vcl

Hope this will help you in your development, will share more articles on magento caching in the future as it is huge, stay tuned.