how to cache css, images and js?

Question

Hi, I would like to have images, css, and javascript cached client-side on their browser when they load up a web page. There are so many different types of caching I am confused as to which ones to use with asp.net mvc.

Would it also be possible to have their browsers check for new or modified versions of these files?

Thanks!

Answer 1

Browsers take care of this for you automatically, actually. You have to go out of your way to get them to NOT cache css, js, html and images.

I'm not that familiar with ASP MVC, but I think they type of caching you're thinking of is opcode caching for your created dynamic output server-side?

Answer 2

client side caching is handled automatically by browesers, just make sure the link is static.

Answer 3

You need to set cache control headers on the server. You can do this by sticking this in your web.config:

<system.webServer>
  <staticContent>
     <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
  </staticContent>
</system.webServer>

This would tell the browser now to even check for new content on anything static for 30 days.

For your second question, provide some mechanism of adding a querystring to the content. In my current project we compress and combine and javascript and css as part of the build. When putting links in the page is looks like:

<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script>

The querystring is the Major.Minor.0.Changeset number and changes anytime we push a build, causing the client to re-fetch it. The same exact thing happens on stylesheets in their <link> element.

Answer 4

@Paul Creasey and @Salsa are both correct that browsers will handle caching by default so long as the link is the same.

As you mentioned, this raises a problem when you need to update those files as you have no guarantee that the client's browser will check for an updated version. In many cases they only do this after a fixed amount of time has passed which can create a crummy user experience.

There are a number of questions already asked on this site as to how to handle alerting the client browsers to refresh the cache. In short, they all rely on changing the link when you change the file's contents.

You can append a parameter to the URL that will only be used for caching purposes such as:

<script src="/myJavascript.js?version=4"></script>

Then just change the version number when you change the contents and need to force a client side refresh ala this answer.

Answer 5

This is best done in IIS or in your config file - make sure your CSS/JS/images are set to never expire.

When you reference them from your code, I suggest appending a version or build-date to the filename, e.g. script.js?20100120, so that when you do come around to changing them, you just need to change the version to force a refresh from all the browsers that have cached it.

Answer 6

AFAIK these kind of caching is out of control of MVC because static content serve directly by IIS .