Question

I have a site with a front page that is static HTML but whose content may vary from time to time. I want all browsers to update contents if changed since last page load. At the same time caching is great for images, stylesheets, javascript, and other resources.

Is Cache-Control header the right option? Would this Cache-Control header do the tricK?

Cache-Control: max-age=3600, must-revalidate

If not, which?

Answer 1

Cache-Control: no-cache will work great if you don’t want any part of the page to be cached.

But if you need to cache the page, except for a particular section, try using this alternative approach:

1. Cache your entire page using Cache-Control: public, max-age=XYZ, where XYZ is the time in seconds.
2. Load the not-to-be-cached section using Ajax.

Example code:

var loadSection = function(section) {
    $.ajax({
        url: '/section/' + section + '.html',
        cache: false
      }).done(function(html){
        $('#main-content').html(html);
        w.pageCache[section] = html;
      });
    }
};

For a live implementation, see http://jagteshchadha.com