we are having issues when deploying the website we are building with Nuxt3 and DatoCMS as the headles CMS. On deployments, there are errors that prevent the website to fully load and are a result of 404 returns in dynamic modules, example below:
The build log on netlify (we are using vite) shows _nuxt/index.afee1112.js is built successfully and there are also no errors but when we visit the file after a successful deploy we get a 404, which could mean that it is has not actually been built or that it is a problem with distribution - we don’t know.
What helps are two things:
Triggering the “Clear cache and deploy site” from the Netlify interface or
Using nuxi clean before running the build command on each deploy
Nuxi clean does the job most of the time but just today we again got the same error when triggering multiple deploys one after another even when cleaning cache manually. So we are looking for a more by-the-book and permanent solution where we can avoid cleaning the cache before each deploy.
Could this be an issue in how the website is being build by netlify or is it a caching issue or CDN-related caching/distribution issue? We do have to say that this does sometimes appear at random (different machines on different connections get various outcomes even when cleaning local cache) which makes it hard to reproduce but therefore a lot more annoying.
We are almost surely confident that this is not a frontend issue because often the error reappears even if the codebase stays the same and the only thing that makes it reappear is the triggered build. Also, no such errors appear when building locally.
We had custom settings in netlify.toml before but now removed them because we also suspected caching might be an issue. Here’s what we had:
# Headers
[[headers]]
for = "*.woff2"
[headers.values]
Cache-Control = "public, max-age=31536000"
[[headers]]
for = "*.woff"
[headers.values]
Cache-Control = "public, max-age=31536000"
[[headers]]
for = "*.css"
[headers.values]
Cache-Control = "public, max-age=31536000"
[[headers]]
for = "*.js"
[headers.values]
Cache-Control = "public, max-age=0, must-revalidate"
[[headers]]
for = "*.jpg"
[headers.values]
Cache-Control = "public, max-age=31536000"
[[headers]]
for = "*.png"
[headers.values]
Cache-Control = "public, max-age=31536000"
[[headers]]
for = "*.webp"
[headers.values]
Cache-Control = "public, max-age=31536000"
[[headers]]
for = "*.svg"
[headers.values]
Cache-Control = "public, max-age=31536000"
We also went from “npm run build” to “npx nuxi clean && npm run build”, this helped but didn’t resolve 100%.
Asset optimisation has been turned off all the time. The site is now also not under a password anymore but during the heaviest errors it was.
The issue is now less frequent, almost nonexistent unless we deploy code from Github… It is also very hard to reproduce and therefore pinpoint what exactly is causing it. Builds from DatoCMS hooks generally don’t cause issues.
Not sure what to do. Do you maybe see anything above that is a red light? (like cache settings etc.)
Is there a reason you set a max-age of 0 and must-revalidate for your js files. This disables caching for JS files so i’d reconsider this; and enabling asset optimisation. But nothing else stands out to me
We set it because we thought it might help with our issues. Currently, the things seem to be pretty stable so we will try to revert to previous settings step by step to see if we identify the cause. Thank you!