Cache reset because of dynamic css loading

I have 2 styles, one for day mode and one for dark mode. When I change the mode I have a cache problem. It resets itself to zero because of a css style that the page is dynamiccally loading.

Apparently Cloudflare resets the cache when the mode changes and thus the element created in the DOM.

What is the solution to this problem?
Thanks!

I am not sure I understand what is going on, why would a CSS style loaded separately from the HTML change the cache in cloudflare? You can’t have 2 versions of the same file at the same exact URL without at least some different URL parameters.

The file in cache will remain the same and all changes must be done client-side.

1 Like

I think because it is the same url but with different DOM elements. I tryed to remove the script and setted up the link to one of the css file and now the cache process works correctly. Looking for a solution.

Code used. First make the cache reset. Second make the cach works properlly.

Not caching:

< script type=“text/javascript”>
var link = document.createElement(‘link’);
link.rel = ‘stylesheet’;
link.href = ‘/css/style.css’;
if (localStorage.getItem(“nigthmode”) == “true”){
link.href = ‘/css/style_dark.css’;
}
document.head.appendChild(link);

Caching:

< link href="/css/style.css" rel=“stylesheet” >

This could work, obviously the cache would be one and then the client would switch them.

The best solution here, but we are getting out of the scope of this community, Stack Overflow might be better, would be to have a single file with the CSS (or an additional file that you load only in case it’s needed with the additional night mode styles) under a specific CSS class which gets added to the HTML tag at the top which will change everything. Switching file like that is a bit of a hack which will create issues often.

1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.