React website serving old css files

Lately, whenever I deploy my site, the preview shows all my new updates perfectly. But when I access the site via my custom domain, although the functionality (and some css) has changed, the rest of the css is from a version of my site from weeks ago.
This seems to be a cache related issue in my browser, since I tried using another computer, and it served my new updates perfectly.

I was hoping to get some help on how to prevent caching on my CSS.

My custom domain is classroomcollab.com
My preview URL is https://5f4f59f9296b417a011acf32--festive-jepsen-ae495b.netlify.app/

Thank you for your help.

@crl There’s not much you can do on the Netlify end to address this issue, as it probably emanates from your ISP, computer, browser, or other personal network configuration. You can try clearing your browser cache, visiting your site in a new private / incognito window, etc., but as long as your system and / or signal chain doesn’t request the latest version of your files, your browser is going to display whatever is in cache.

1 Like

Is there a way to force the user’s browser to use the latest version?

Hi @crl,

In these situations i do append a request parameter to the css file, that way the browser won’t cache the css file:

<link rel="stylesheet" href="https://d33wubrfki0l68.cloudfront.net/bundles/style.css?v=1>">
Note the ?v=1 at the end of the file.

Since you are using webpack to build your assets you can do that automatically on every build,to ensure a new url is generated for each new version of the site.
One way to do this is to change the webpack config as it is described in this stackoverlfow question.

Good luck!