we have built a TYPO3 site for a client (first T3 site ever) and have been facing some caching issues since launch.
The site is running on version 12.4.10 in a composer-based PHP 8.1.22 environment.
The issue we’re having is that template changes or CSS changes are not visible in the frontend, even after clearing the cache multiple times. We tried flushing the cache via the TYPO3 backend, tried deleting multiple directories storing cached files.
Directories manually deleted were:
/var/cache
/public/_assets
/public/typo3temp/assets
Detailed information about our issues:
Issue 1)
Changed the template of a form (default form extension) in EXT:extname/Resources/Private/Partials/Form/Page.html. Uploaded the changed template via FTP (no pipeline yet) to the server. But after clearing all caches multiple times, the changes were still not visible.
Issue 2)
We compile our SCSS styles into a single main.css which is included via TypoScript using includeCSS. That works fine. At some point we wanted to push a little CSS fix for something and uploaded the new main.css to the server. You’d think that TYPO3 would pick up the changes - but nope. Flushing caches did not help.
I identified the cached CSS file and straight up pasted the changes into that, which worked. But now it broke again and the few new lines of CSS are not cached anymore.
It almost feels like there is a second, old main.css which is being cached and the actual file is not considered.
We developed this site locally using Docker, where that issue once occurred too. Restarting the container fixed the caching issue. We haven’t tried restarting the production server yet.
We have that site deployed to a testing server as well, where the problem occurs too. So maybe there is something misconfigured? The environment does not seem to be the reason.
Has there ever been an issue like this before? Does anyone know what the problem is?
I’d be happy to provide more information if it helps debug the issue.
Given that restarting the Docker container seems to fix the issue, it sounds like this could be due to some caching in the environment (like a memcache or the browser cache), rather than within TYPO3.
However, clearing the cache is usually a necessary step in order to make sure changes to files become visible. For optimization reasons, but depending on your configuration, TYPO3 often merges CSS and JavaScript into one or more cached files, and those will need a cache-clear to be updated.
I’ve already, several times in fact, cleared the cache the way you described it. But that didn’t seem to have any effect in my case. Although there weren’t any errors popping up and the caches seemed to be cleared correctly, the system just doesn’t recognize the changes I have made in the CSS and templates, respectively.
For simplicity, let’s say in my main.css file that gets loaded via TypoScript, I have added a new class .test. When I go view or edit the merged CSS files after clearing the cache, my .test class is not in the merged CSS, but still in the source main.css file.
It feels like the system caches some other arbitrary files, but not the actual source files I edited.
Try disabling TYPO3’s CSS file concatenation. That will allow you to debug this with the original file.
You can disable concatenation of CSS files by setting config.concatenateCss = 0 at the end of your TypoScript template. You may also want to set config.compressCss = 0 to make sure the file is not compressed and modified by TYPO3 in that way. (More info about concatenateCss in the documentation.)
Make sure that the correct file is included in the HTML of the page and that it is successfully loaded by the browser.
Disabling compression and concatenation, I can see that the cached CSS file is a few months old, judging by the unix timestamp. <link rel="stylesheet" href="/_assets/8716db5932a9b87d342fae39556256a8/Stylesheets/main.css?1706619400" media="all">
Flushing the cache again did not help to refresh that.
And even if that worked, there’s still the same issue with the template cache - it just doesn’t want to clear itself.
I will talk to the team, hopefully figure something out and report back once I might need further help.
do you have a proxy which stores information for ever?
A proxy can hide every change on the file system or in the database as the request from the browser never reaches the web server to build new data.
Never configure a proxy to store for more than a day (preferable is less than an hour).
unless you are sure that every change to the filesystem or the database will clear cache from proxy.
and even then a time restriction is required if the content is time dependent (time controlled visibility in TYPO3)
An update on the situation, for anyone who might come across this error in the future:
We couldn’t clearly identify the problem, but it for sure has got to do with the server environment.
Everything works fine locally, and in the development environment. But in the production environment, hosted by a different provider than the dev environment, the caching breaks.
Posting again to share a fix (?), as I’ve got some more insights now.
The project was initially set up on a local machine using Docker. Later, the site got deployed to a staging environment, running without issues.
The issues started when the site went live and we simply copied the project from the staging environment to the production server. Maybe the permissions / user / environment didn’t match? We couldn’t really figure that out, even after much testing.
Just now I’ve created a new TYPO3 site on the same production server directly using composer. No copy pasting the whole project from a different environment. I imported the database and copied the fileadmin and… It works! No caching issues!
