Parallel async components rendering

[smnbbrv]

Body

Summary

Allow a parallel rendering for the async components (the Promise-alike components e.g. with top level await)

Background & Motivation

I have several components that fetch data from the server in SSR mode (with top-level await). The components are configured in CMS and mixed altogether in a following manner:

Example:

const items = ...
---
{
  items.map((item) =>
    <Component component={item.component} />
  )
}

where the component is similar to this:

const { component } = Astro.props as Props;
---
// each component here can e.g. asynchronously call the backend / CMS / awaiting long running task etc
{component.name === 'adsBlock' && <AdsBlock component={component} />}
{component.name === 'contactForm' && <ContactForm component={component} />}
{component.name === 'text' && <Text component={component} />}
/// etc

If they were fetching the data in parallel, that would be totally fine, however the components are rendered sequentially. That means, every data fetch happens one after another, and instead of 100ms rendering time I would get amountOfFetches * 100ms rendering time which is totally unacceptable.

This should be something similar to a Promise.all but inside the template.

Possible workaround: the data can be preloaded in a root .astro component and then passed to the children components. This is however not something I can treat as optimal: this propagates the code complexity and excluding the possibility to encapsulate the component logic. Each component should be responsible for fetching the data it requires.

Goals

• better performance out-of-the-box
• clean code

Example

This could potentially look like

  <parallel>
    items.map((item) =>
      <Component component={item.component} />
    )
  </parallel>

[smnbbrv]

Linking corresponding PR withastro/astro#7071

[smnbbrv]

Transforming into issue withastro/astro#7127