Hydration mismatch since 1.3.0

[ElMatella]

What version of astro are you using?

1.3.1

Are you using an SSR adapter? If so, which one?

Node

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Hi, since 1.3.0, I'm having a bug with SSR and VueJS. It only happens on rather long pages.

Take this Astro component:

---
import Layout from '../layouts/Layout.astro';
import SomeComponent from '../components/SomeComponent.vue'
---

<Layout title="Welcome to Astro.">
  <main>
    <SomeComponent client:load></SomeComponent>
  </main>
</Layout>

And this Vue component:

<template>
  <div>
    <div v-for="i in 10000">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div v-for="i in 5">
      Hello World!
    </div>
  </div>
</template>

From 1.3.0, the page takes a really longer time to generate, and results in a hydration mismatch on the client:

When switching back to 1.2.8 with npm install [email protected] --save-exact, the mismatch error disappear and the page takes significantly less time to generate:

Because I use rather long HTML pages, I can't upgrade to 1.3.* and I'm stuck to 1.2.8.

To reproduce, please clone the repo, and run:

npm install
npm run build
node server.mjs

Then to see how it worked before, type:

npm install [email protected] --save-exact
npm run build
node server.mjs

Thank you very much for your time, and thank you for your amazing work :)

Reproduction: https://github.com/ElMatella/astro-ssr-bug

Link to Minimal Reproducible Example

https://github.com/ElMatella/astro-ssr-bug

Participation

• I am willing to submit a pull request for this issue.

[AirBorne04]

I have a similar issue and i hunted it down to this line where the comparison is checking for string, but if it is HTMLString (what it is in my case) it is just jumping over it and the array buffer stays empty for the hydration script.

[AirBorne04]

i would recommend a change to something like this.

if (ArrayBuffer.isView(part)) {
  this.parts[i] = part;
}
else {
  this.parts[i] = encoder.encode(String(part));
}

this mirrors (invert) the behaviour of the .toString method of the same object. Though i am not familiar with the inner workings.

maybe this could be included in PR #4918

[matthewp]

Thanks @AirBorne04 for doing the research!

[ElMatella]

Hey, thank you for handling this issue but unfortunately the initial problem does not seem to be fixed. I think I identified an even smaller reproduction, I'll try to update this or I'll just create an other issue, as you wish.
Thank you again and have a nice week-end

[ElMatella]

Also, note on my reproduction repository, that with the same code:

• Astro 1.2.8: Renders a 934kB document
• Astro 1.3.0: Renders a 5.6MB document

Do you know what could cause such a thing?

[matthewp]

Oh wow, no but that's very interesting. 1.3.0 introduced the ability to stream responses in the template. I'm guessing this is the culprit (and also the perf regressions reported)

[matthewp]

@ElMatella got some reports of performance going down. I think it's likely that that issue and yours are related. I have a preview tag that might fix it, can you try this out? #4956 (comment)

[matthewp]

There's definitely still a speed different even after 1.4.3. So I'm prioritizing this.

[matthewp]

I think I've tracked down the problem here, working on a fix.

[matthewp]

Have a preview release for this:

npm install astro@next--perf-2

Will test in your repo.

[matthewp]

No more mismatch from my testing.

[ElMatella]

Houray! Looks perfect, it's fixed on my end. thank you very much! I'll look at the pull request, would love to contribute some day. Have a very nice day or night.
Cheers

[carlos00027]

I've that problem but I use Vue 3

// my-page.astro
 <Carrito client:load />

const getItemsSelected = readonly(computed(() =>  itemsSelected.value))

<BtnPrimary
        :disabled="getItemsSelected.length === 0"
        @click="onClickContinuar"
        >
          Continuar la compra
        </BtnPrimary>

[Popov-Vladislav]

@carlos00027 replace

<Carrito client:load />
↓
<Carrito client:only="vue" />