Major issue w/ content duplication

[spice olive]

Some of our customers are having an issue with duplicate data on their pages. It's taken me a looong time to figure this out because I could never replicate it..and I JUST remoted into a customer's computer to investigate.

Apparently, if there's an SSR hydration mismatch, Vue will reconcile by just showing both HTML blocks. In this case, it looks like Astro is rendering a div differently on the server vs the client.

If I view the server-side output, for example, it's <div class="xyz" data-v-zz> but on the client, it's <div data-v-zz class="xyz">. this simple discrepancy is causing Vue to render out the div twice in the browser

Major issue w/ content duplication

in all the other divs that were rendered just fine, class always comes before data-v-*

rather, it seems data-v-* is supposed to always be last in the attribute list. but randomly, it's not.

interestingly, this only happens to a small subset of customers.. and I think the common denominator there is they have poor Internet connections.

I can never replicate this issue myself

(also, someone let me know if this is NOT an Astro issue. it's kinda hard to tell what the origin of this bug is)

[spice olive]

eh, maybe I'm way off on this after all 😕 I'm gonna try to rewrite this Vue component to be pure Astro and see if the issue still occurs