Hydration timing issue on larger pages about astro HOT 12 OPEN

Thanks, I see it with "Slow 3G".

from astro.

You can probably up the number of times it loops to trigger it on faster connections too. It's some combination of:

• amount of content on the page to be hydrated
• amount of JS being loaded
• connection speed

that all account into whatever race condition is happening here.

from astro.

Could share a project instead of the compiled result of a project?

from astro.

Hello @hrmcdonald. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

from astro.

Alright @lilnasy, I've updated the reproduction repo to include src code. Our version of our internal package is included locally temporarily as we cannot publish it to a public repo. Because of this, NPM handles the deps funky, so you need to use PNPM to install. If you do though you can actually see this issue present here even in dev mode.

from astro.

Is the involvement of those internal packages necessary for the bug to appear?

from astro.

No, this will occur with any SSR'd Lit web component. Even ones declared within the Astro project. Because it only seems to occur after a certain amount of JS is being loaded I bundled our components to make recreation easier (and because I'm not positive what portions of more public Lit libraries like Shoelace are SSR compatible yet).

I have updated the recreation project with a local web component that also highlights why this issue matters and shows you live on the DOM where the components stop hydrating from their DSD properly as the page is loading.

from astro.

Do you see the error in dev, or only in production?

I cant reproduce the error in either.

from astro.

Sorry about that, I updated the included build to just bundle in those other internal deps instead of trying to configure NPM to scope the registries properly. If you clear your node_modules and try again it should install fine now.

The issue only happens when some level of network latency is introduced, so please make sure you've enabled simulated "Fast 3G" throttling to hit it reliably locally. In our real deployments it happens on much faster connections, but this extreme triggers it very consistently in our testing of the recreation at least.

from astro.

I was able to install after updating the package.json to refer to mortar/style and one other library by file:, and I was able to run dev and build. I did not see an error in the browser console. All the components rendered "true".

from astro.

Even with network throttling enabled in the dev console? It will almost never hit the issue locally in dev mode without throttling.

Sorry, to answer your earlier question, we do see it in production on a lot of pages. We don't typically see it in dev, but extreme cases can be triggered locally in dev mode if you enable network throttling to simulate a slower connection so the timing hits whatever is causing this.

from astro.

Is there any chance someone could point me in a direction to start looking into this one? This is still affecting nearly all of our pages in production. I likely won't be able to identify a fix alone, but would like to take a stab and hunting for some more insights and potential issues.

from astro.