Astro fails to load lazy SolidJS components after server startup due to race condition

[howagain]

What version of astro are you using?

2.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

What browser are you using?

Chrome

Describe the Bug

When starting up the server for the first time, a top level lazy component does not render on the server and the complete HTML response is sent before that render branch finishes.

I believe that this is because Astro does not await inside components. But it does cache the result of repeated calls to render. Resulting in a race condition.

However, what is interesting is that this behavior is not only intermittent but 3 states are possible.

1. The component fails to render completely, usually on first startup only. The lazy component is not in the source HTML.
2. The component flashes for a second before hydration, and then after hydration occurs, it disappears. Usually this happens on the second refresh and much more frequently in my more complex production app where hydration takes more time.
3. The component successfully renders itself, usually after several refreshes. The component is in the source HTML.

In the example provided you'll notice that the text "My App" appears but the buttons below do not appear on first render. But if you refresh the dev server page you will see the buttons appear. Inspect the HTML between attempts and you will see the buttons are not there in the first render but are there in subsequent renders.

*Note in the example provided, I have only seen 1 & 3 occur due to the hydration occurring so fast.

If you are struggling to reproduce, start and stop the dev server between attempts.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-efihju?file=src%2Fpages%2Findex.astro

Participation

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

[howagain]

After investigating I think that the issue is better visualized by this fork which shows a suspense fallback message rather than nothing.

I believe it's because according to Solid's tutorial on lazy the first time a component loads in solidJS with lazy it's dynamically loads.

The output is a Component that can be used as normal in our JSX template with the exception that internally it dynamically loads the underlying imported code when it is rendered the first time, halting that branch of rendering until the code is available.

I seem to remember something saying that Astro does not support async in UI components. If that's the case I don't know what a solution would be for this, is there someway to await suspense boundaries in SolidJS?

[howagain]

If this is an async problem it looks like #6791 maybe would solve this issue.

[matthewp]

Yep, let's try and get that PR merged.

[florian-lefebvre]

@howagain does the latest version of the solid integrations resolves the issue on your side?

[matthewp]

No response, so closing, please open another issue if you have the problem.