Cache Control Header in NGINX

Cache Control Header in NGINX

The Cache-Control header is a powerful tool that can be used to control how a browser caches a resource. Here are some real-world examples of how to use the Cache-Control header in a location block:

  • To set a maximum age for a resource, you can use the max-age directive. This directive specifies the number of seconds for which the resource can be cached. For example, to set a maximum age of one year for all image files, you can use the following location block:

      location ~* \.(jpg|jpeg|png|gif)$ {
          add_header Cache-Control "max-age=31536000";
      }
    
  • To prevent a resource from being cached, you can use the no-cache directive. This directive tells the browser to revalidate the resource with the server before using a cached version. For example, to prevent caching of all HTML files, you can use the following location block:

      location ~* \.html$ {
          add_header Cache-Control "no-cache";
      }
    
  • To allow a resource to be cached by intermediate proxies, you can use the public directive. This directive tells the browser that the resource can be cached by any cache, even if it is not the end user's browser. For example, to allow caching of all CSS files by intermediate proxies, you can use the following location block:

      location ~* \.css$ {
          add_header Cache-Control "public";
      }
    
  • To prevent a resource from being modified, you can use the immutable directive. This directive tells the browser that the resource will never change, so it can be cached indefinitely. For example, to prevent modification of all JavaScript files, you can use the following location block:

      location ~* \.js$ {
          add_header Cache-Control "immutable";
      }
    

Note that the Cache-Control header offers more control over caching behavior than the Expires header and takes precedence over the Expires header when both are present[6].

The Cache-Control header is a powerful tool that can be used to control how a browser caches a resource. However, there are other headers that can be used in conjunction with Cache-Control to provide more granular control over caching behavior. Here are some examples:

  • ETag: This header is used to provide a unique identifier for a resource. The browser can use this identifier to check if the resource has changed since it was last cached. You can use the etag directive in a location block to set the ETag header. For example:

      location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
          add_header Cache-Control "max-age=31536000";
          etag on;
      }
    
  • Vary: This header is used to specify which request headers should be taken into account when determining whether a cached resource can be used. You can use the vary directive in a location block to set the Vary header. For example:

      location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
          add_header Cache-Control "max-age=31536000";
          etag on;
          vary User-Agent;
      }
    

    This location block sets the Vary header to User-Agent for the same file types as the previous example.

  • Last-Modified: This header is used to specify the date and time when a resource was last modified. The browser can use this information to check if the resource has changed since it was last cached. You can use the last_modified directive in a location block to set the Last-Modified header. For example:

      location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
          add_header Cache-Control "max-age=31536000";
          etag on;
          last_modified on;
      }
    

Note that the use of these headers depends on the specific requirements of your website and the behavior you want to achieve. In general, it is recommended to use the Cache-Control header as the primary caching control header and to avoid using the Expires header and the Pragma header[1].

Another location block

location ~* \.(css|js|jpg|png)$ {
      access_log off;
      add_header Cache-Control public;
      add_header Pragma public;
      add_header Vary Accept-Encoding;
      expires 1M;
    }

References

NGINX Fundamentals: High Performance Servers from Scratch | Udemy

https://www.imperva.com/learn/performance/cache-control/

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

https://www.keycdn.com/blog/cache-control-immutable

https://simonhearne.com/2022/caching-header-best-practices/

https://paulcalvano.com/2018-03-14-http-heuristic-caching-missing-cache-control-and-expires-headers-explained/

https://robotecture.com/http-topics/http-headers/http-header-expires/

https://simonhearne.com/2022/caching-header-best-practices/

https://robotecture.com/http-topics/http-headers/http-header-expires/

https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers

https://www.turing.com/blog/cache-control-headers-and-use-cases/

https://stackoverflow.com/questions/4480304/how-to-set-http-headers-for-cache-control

https://serverfault.com/questions/88523/should-i-use-expires-headers-cache-control-headers-or-both