How to make sure previous visitors don't see the old HTML page?

Question

I see a lot of answers about forcing cache reload recommending a solution that incorporates the HTML page itself.

But when you have a situation where your old website was written as an index.html homepage, and now you swap that with something new, how do you make sure that a returning visitor sees the new content?

The old website used to have index.html as the index page (in nginx's configuration), which i have now changed to index.php. But whenever i visit it from a browser that has visited it previously, it still opens the cached old index.html page. A new browser will load index.php correctly.

One of seemingly correct answers i found, was to tell nginx to set expires -1; for the server {} section, which would force the cache to invalidate; but for some reason that didn't work.

What needs to happen, of course, is that the visitors will always get the new page, without explicitly issuing a refresh themselves.

Presumably the solution should be to invalidate the cache through headers. But how?

Edits to address all the suggested comments and answers

1. Like i said in the first paragraph of my answer, this issue is not solved by editing the index file (like adding parameters for "cache busting"), because the index file itself has been cached, that is the problem.
2. I have nowhere in my question mentioned javascript or CSS files. Again, it's the index.html file that has been cached.
3. The existence of index.html and index.php does not create conflicts. The entire system is working correctly, it's only the old visitors who have previously visited the page back when index.html was set as the index page in the server configuration, that still get the cached index.html as the homepage even after the index has been changed to index.php. This is also very easily provable by the fact that this problem still happens even after the index.html file is completely deleted. Because once the browser caches an HTML file, it no longer asks the server for what the index file is, it just shows what it has cached.

So the complete scenario is this:

1. The website has index.html set as the index page in the server configuration
2. Browser visits the website
3. Browser caches the homepage
4. The index page in the server configuration gets changed to index.php
5. Same browser visits the website
6. Browser shows cached index.html from before

In number 5., if i were to visit the website with a new browser, it will show the contents of the new homepage that is in index.php. So the question is, how do i get the old browser to forget what it has cached, and load the new homepage?

Answer 1

If I understood your question correctly, I believe what you are looking for is something called cache busting. What this means, is that you essentially add a phantom/ghost string to your relevant CSS / JS files. By relevant, I mean files that you expect to make changes to over the course of time.

Remember, caching is a healthy functionality to the user, as it makes your website faster once the user has loaded the content once. You should therefore think carefully of what files you want to add the cache busting to. Fx. there is no need to add cache busting to static libraries that you will not make future changes to.

An example of cache busting would be the following:

<script src="/js/example.js<?php echo '?'.date('Y-m-d H:i:s'); ?>" type="text/javascript"></script>

<link href="/css/example.css<?php echo '?'.date('Y-m-d H:i:s'); ?>" rel="stylesheet">

What you will notice here, is that I am concatenating the PHP date function to my JS and CSS examples. The date function prints the current day, hour, minutes and seconds. In other words, it's constantly changing its name down to the very second. Therefore, it is impossible for the browser to keep a cached version of the files as they are technically not the same file after every second has passed.

If this wasn't what you were looking for, specifically, let me know and I'll edit my answer.

Your question could also be similar to what has been addressed and answered here.