How does appending ?v=1 in script load new javascript [duplicate]

Question

This question already has answers here:

What does appending "?v=1" to CSS and JavaScript URLs in link and script tags do? (8 answers)

Closed 8 years ago.

While going through HTML 5 boilerplate template observed few of the places they have used

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>

But how does this help? How the query string going to work? I don't have the file name changed nor did I wrote any script for doing anything with query string (?v=1) .

What am I missing? Do I need to change the file name or do I need to have a repository for sure to get this working?

Answer 1

1. Most web servers will serve up a static file no matter what query string you put at the end of the URL.
2. Browsers cache data based on its URL.
3. Changing the URL to a different one means you won't get the cached version from the old URL but, given (1), the (new version of the) file stored in the same location on the server's disk will be served.

But how does this help? How the query string going to work? I don't have the file name changed nor did I wrote any script for doing anything with query string (?v=1) .

Then it doesn't help. You have to change the query string when you change the file.

What am I missing? Do I need to change the file name

No

or do I need to have a repository for sure to get this working?

You need to change the query string when you release a new version of the file.

One way to do that would be to use a build script that sets the URL to (for example) the commit id that last changed the file in a version control repository.

Answer 2

The query string allow you to say to browsers "hey, my file has changed" and force the refresh of the client cache by updating the version number. Otherwise, the browser will not fetch the file if the client has a valid version in is local cache.

If tomorrow, you're changing the CSS file, you can force your clients to refresh their cache by changing the URL to

<link rel="stylesheet" href="css/style.css?v=2">

... and so on to every updates.

This approach allows you to set a cache header long in your HTTP headers (1 month or even more) to make browsers don't update their static file cache unless you're explicitly updating the CSS link.