Odd behavior with caching and "new Date()"

[sarensabertooth]

I have dealt and tried to fix this issue for a long time, so please bare with me if this is simply a usage error. I have searched far an wide through the documentation and all else with no definitive solution.

I have this component in which I get the current day to visually highlight the corresponding opening hours on any given day.
I made sure nginx & apache don't cache anything and tested on multiple browsers & devices, even browsers I never opened the site on.
When visiting the site for the first time the date will be completely off, when using any "<Link\>" the date will suddenly be correct and stay correct even on refresh & hard refresh.
It reverts to the wrong result when using incognito mode or sometimes also when flushing the browser cache (but not always).
This also exclusively happens in the production build.

This is the affected component structure

const Layout = ({ children }) => {
	const data = useStaticQuery(graphql
		query {
			directus {
				opening_hours {
					dates
				}
			}
		}
	)
	
	const date = new Date()
	let day = date.getDay()

	return …
})