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.