Vue.js SSR Hydration and Client-Side Time Zone Detection: Interoperability for Consistent Date Rendering

When rendering dates in a Vue.js application using server-side rendering, the server typically operates in UTC while each client runs in its own IANA time zone. The goal is to achieve identical date presentations during initial server render and subsequent client hydration without hydration mismatches or UI flicker. Vue provides no built-in time zone APIs, so developers must bridge the server-rendered output and client-side formatting using JavaScript's Intl.DateTimeFormat or third-party libraries such as Luxon or date-fns-tz. A key constraint is that the server cannot reliably know the client's time zone before the first response, and Intl.DateTimeFormat().resolvedOptions().timeZone is only available on the client. Additionally, Vue's reactivity system does not track mutations to Date instances, requiring full replacement for updates. Current approaches vary—some embed the detected zone in a meta tag, others use cookies or HTTP headers—but no official pattern exists for propagating time zone context from server to client.

What is the most reliable pattern for serializing dates on the server so that client-side formatting produces identical output during hydration? How should the client's detected IANA time zone be communicated back to the server for subsequent requests without introducing a flash of mismatched content? Which library or native API combination minimizes bundle size while handling edge cases such as privacy-focused browsers that block time zone detection?