Hydration mismatch / flashing when altering phone number
I'm trying to get a phone number to change using a package called "InfinityTracking".
The nuts and bolts of what the issue is, we have a SSR component (or to be specific just a phone number) that is SSR.
When the page is loaded, the phone number is returned from the server, it is then overridden client-side by this external library (injected by GTM), then client-side hydration happens and it returns back to the server-rendered value and then the package changes it back.
As a pseudo shorthand, its:
123 -> 456 -> 123 -> 456
and the desired behaviour is:
123 -> 456
The package is non-negotiable.
I've tried 'wrapping' the phone number in a component that is
<client-only> but that obviously prevents the 'initial' value from the Server being rendered.1 Reply
try calling the function in the onMounted() hook