Why is the server more important than the browser in terms of caching (or what does this server allow itself)?

Question

PHP

I'm not a very experienced person - 1 year of work as a PHP developer.
I have the following problem.
I am developing a functionality like adding products to the cart.
And when adding a new product, the cart is in no hurry to show it (although the cookies with the new cart content seem to be perfectly overwritten) - it shows the old cart content.
Obviously, the browser, dog, takes the basket from the history, from the cache.
I began to deal with it in different ways.
I came across here, on Habré, exactly the same story:
https://qna.habr.com/q/979783
And the solution turned out to be exactly the same.
In htaccess, in which it was already written:

<IfModule mod_headers.c>
        Header append Cache-Control "no-store, no-cache, must-revalidate"
</IfModule>
<IfModule mod_expires.c>
        ExpiresActive On ExpiresDefault "now"
</IfModule>

I needed to add more:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

What confuses me is that I do not understand why the server is doing all this.
This is purely browser-based business - what to cache, what not to cache.
Why was it not enough for me to solve my problem of adding a file with a basket to the head in the html file like this:

<meta http-equiv="Cache-Control" content="no-store">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

Ok, I could understand, if I had to disable caching in the whole directory, it would be stupidly more convenient to register it on the server, I guess.
But I, for example, need a caching ban for one separate file.
And why does it not work, why does the server allow itself to tell the browser how to work with it?

Answer 1

As far as I understand, caching occurs when sending an ajax request. Therefore, you need to indicate that the request does not need to be cached in the ajax request. For example, in axios it goes something like this:

axios.get(
  'https://YOUR-URL.com',
  {
    // query URL without using browser cache
    headers: {
      'Cache-Control': 'no-cache',
      'Pragma': 'no-cache',
      'Expires': '0',
    },
  }
)

Caching works on both sides. On the server, we simply indicate that we propose to cache these pages / files for such and such a time. Perhaps your Api will be used not only by your Frontend, but also by other sites and even servers. Therefore, your server makes recommendations to all clients on what and how to cache. But of course, the final decision is up to your browser