Wanted to highlight MDN's HTTP caching guide[0] that OP links in the conclusion. It's written at a higher level than the underlying reference material and has been a great resource I've turned to several times in the last few years.
[0]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cac...
I think setting FileETag None solved it. With that setup, the browser won't use stale JS/CSS/whatever bundles, instead always validating them against the server, but when the browser already has the correct asset downloaded earlier, it will get a 304 and avoid downloading a lot of stuff. Pretty simple and works well for low traffic setups.
It was surprisingly easy to mess up, or having your translation bundles have cached out of date versions in the browser.
(nothing against other web servers, Apache2 was just a good fit for other reasons)