vue hydration text mismatch only in the production build, dev is clean SSR

Dev never shows it because you're rendering per request against a server clock that's milliseconds from your browser clock. In production the page is cached — CDN, ISR, whatever you have — so the HTML is an hour old by the time a browser sees it. It isn't a Vue bug, your component genuinely isn't deterministic.

The fix that avoids the shift: render the absolute timestamp on the server, upgrade to relative after mount.

<script setup>
const props = defineProps<{ iso: string }>()
const rel = ref<string | null>(null)
onMounted(() => { rel.value = formatRelative(props.iso) })
</script>
<template>
  <time :datetime="iso">{{ rel ?? formatAbsolute(iso) }}</time>
</template>

Server and client both produce the absolute string for first paint, so hydration matches. Then it swaps. No ClientOnly, and no shift if the element has a stable width.

General rule that's saved me a lot of time: anything that touches Date.now(), Math.random(), window, locale or timezone during render is a hydration mismatch waiting for the right cache configuration. Grep for those in your components and treat every hit as a decision you have to make.

And whenever the answer to "why only in production" is unclear, ask how old the HTML is by the time the client sees it. That's usually the whole story.

Related trap: if you format with toLocaleString, the server's locale and timezone are not the user's. Server in UTC renders 14:00, browser in Berlin renders 16:00, mismatch. Pin the timezone explicitly on the server side or do the same mount-swap trick.

just suppress the warning, vue lets you ignore mismatches on a node. no need to restructure a component over a console message

If you keep ClientOnly anywhere, use its fallback slot with an element of exactly the same dimensions. Most "ClientOnly causes layout shift" complaints are really "ClientOnly rendered nothing, then something".

Worth checking your actual cache TTL while you're in here. "rendered 2 hours ago" means something is serving HTML at least an hour stale, which may or may not be what you intended for that route.