Parallelize rendering of sibling components to avoid async waterfalls (…

…#7071)

* Parallelize rendering of sibling components to avoid async waterfalls

* Catch and rethrow errors when eagerly rendering children

* Catch `Response` in rendering stage and throw error

* Add changeset

* Fix test error message

* Improve unit tests

* Start async generators in non-buffered mode, and only start buffering once a component doesn't resolve immediatly

* Add more documentation

.changeset/clever-garlics-relate.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Render sibling components in parallel

packages/astro/src/runtime/server/render/astro/render-template.ts

@@ -3,6 +3,7 @@ import type { RenderInstruction } from '../types';
 import { HTMLBytes, markHTMLString } from '../../escape.js';
 import { isPromise } from '../../util.js';
 import { renderChild } from '../any.js';
+import { EagerAsyncIterableIterator } from '../util.js';
 
 const renderTemplateResultSym = Symbol.for('astro.renderTemplateResult');
 
@@ -35,12 +36,23 @@ export class RenderTemplateResult {
  async *[Symbol.asyncIterator]() {
  const { htmlParts, expressions } = this;
 
+ let iterables: Array<EagerAsyncIterableIterator> = [];
+ // all async iterators start running in non-buffered mode to avoid useless caching
+ for (let i = 0; i < htmlParts.length; i++) {
+ iterables.push(new EagerAsyncIterableIterator(renderChild(expressions[i])));
+ }
+ // once the execution of the next for loop is suspended due to an async component,
+ // this timeout triggers and we start buffering the other iterators
+ setTimeout(() => {
+ // buffer all iterators that haven't started yet
+ iterables.forEach((it) => !it.isStarted() && it.buffer());
+ }, 0);
  for (let i = 0; i < htmlParts.length; i++) {
  const html = htmlParts[i];
- const expression = expressions[i];
+ const iterable = iterables[i];
 
  yield markHTMLString(html);
- yield* renderChild(expression);
+ yield* iterable;
  }
  }
 }

packages/astro/src/runtime/server/render/page.ts

@@ -157,6 +157,15 @@ export async function renderPage(
  }
  }
 
+ // `chunk` might be a Response that contains a redirect,
+ // that was rendered eagerly and therefore bypassed the early check
+ // whether headers can still be modified. In that case, throw an error
+ if (chunk instanceof Response) {
+ throw new AstroError({
+ ...AstroErrorData.ResponseSentError,
+ });
+ }
+
  const bytes = chunkToByteArray(result, chunk);
  controller.enqueue(bytes);
  i++;

packages/astro/src/runtime/server/render/util.ts

@@ -138,3 +138,111 @@ export function renderElement(
  }
  return `<${name}${internalSpreadAttributes(props, shouldEscape)}>${children}</${name}>`;
 }
+
+// This wrapper around an AsyncIterable can eagerly consume its values, so that
+// its values are ready to yield out ASAP. This is used for list-like usage of
+// Astro components, so that we don't have to wait on earlier components to run
+// to even start running those down in the list.
+export class EagerAsyncIterableIterator {
+ #iterable: AsyncIterable<any>;
+ #queue = new Queue<IteratorResult<any, any>>();
+ #error: any = undefined;
+ #next: Promise<IteratorResult<any, any>> | undefined;
+ /**
+ * Whether the proxy is running in buffering or pass-through mode
+ */
+ #isBuffering = false;
+ #gen: AsyncIterator<any> | undefined = undefined;
+ #isStarted = false;
+
+ constructor(iterable: AsyncIterable<any>) {
+ this.#iterable = iterable;
+ }
+
+ /**
+ * Starts to eagerly fetch the inner iterator and cache the results.
+ * Note: This might not be called after next() has been called once, e.g. the iterator is started
+ */
+ async buffer() {
+ if (this.#gen) {
+ // If this called as part of rendering, please open a bug report.
+ // Any call to buffer() should verify that the iterator isn't running
+ throw new Error('Cannot not switch from non-buffer to buffer mode');
+ }
+ this.#isBuffering = true;
+ this.#isStarted = true;
+ this.#gen = this.#iterable[Symbol.asyncIterator]();
+ let value: IteratorResult<any, any> | undefined = undefined;
+ do {
+ this.#next = this.#gen.next();
+ try {
+ value = await this.#next;
+ this.#queue.push(value);
+ } catch (e) {
+ this.#error = e;
+ }
+ } while (value && !value.done);
+ }
+
+ async next() {
+ if (this.#error) {
+ throw this.#error;
+ }
+ // for non-buffered mode, just pass through the next result
+ if (!this.#isBuffering) {
+ if (!this.#gen) {
+ this.#isStarted = true;
+ this.#gen = this.#iterable[Symbol.asyncIterator]();
+ }
+ return await this.#gen.next();
+ }
+ if (!this.#queue.isEmpty()) {
+ return this.#queue.shift()!;
+ }
+ await this.#next;
+ // the previous statement will either put an element in the queue or throw,
+ // so we can safely assume we have something now
+ return this.#queue.shift()!;
+ }
+
+ isStarted() {
+ return this.#isStarted;
+ }
+
+ [Symbol.asyncIterator]() {
+ return this;
+ }
+}
+
+interface QueueItem<T> {
+ item: T;
+ next?: QueueItem<T>;
+}
+
+/**
+ * Basis Queue implementation with a linked list
+ */
+class Queue<T> {
+ head: QueueItem<T> | undefined = undefined;
+ tail: QueueItem<T> | undefined = undefined;
+
+ push(item: T) {
+ if (this.head === undefined) {
+ this.head = { item };
+ this.tail = this.head;
+ } else {
+ this.tail!.next = { item };
+ this.tail = this.tail!.next;
+ }
+ }
+
+ isEmpty() {
+ return this.head === undefined;
+ }
+
+ shift(): T | undefined {
+ const val = this.head?.item;
+ this.head = this.head?.next;
+ return val;
+ }
+}

packages/astro/test/fixtures/parallel/package.json

@@ -0,0 +1,12 @@
+{
+ "name": "@test/parallel-components",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "build": "astro build",
+ "dev": "astro dev"
+ },
+ "dependencies": {
+ "astro": "workspace:*"
+ }
+}

packages/astro/test/fixtures/parallel/src/components/Delayed.astro

@@ -0,0 +1,11 @@
+---
+const { ms } = Astro.props
+const start = new Date().valueOf();
+await new Promise(res => setTimeout(res, ms));
+const finished = new Date().valueOf();
+---
+<section>
+ <h1>{ms}ms Delayed</h1>
+ <span class="start">{ start }</span>
+ <span class="finished">{ finished }</span>
+</section>

packages/astro/test/fixtures/parallel/src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import Delayed from '../components/Delayed.astro'
+---
+
+<Delayed ms={30} />
+<Delayed ms={20} />
+<Delayed ms={40} />
+<Delayed ms={10} />

packages/astro/test/fixtures/streaming/src/pages/slot.astro

@@ -15,7 +15,7 @@ import Wait from '../components/Wait.astro';
  <p>Section content</p>
  </Wait>
  <h2>Next section</h2>
- <Wait ms={50}>
+ <Wait ms={60}>
  <p>Section content</p>
  </Wait>
  <p>Paragraph 3</p>

packages/astro/test/parallel.js

@@ -0,0 +1,36 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Component parallelization', () => {
+ let fixture;
+
+ before(async () => {
+ fixture = await loadFixture({
+ root: './fixtures/parallel/',
+ });
+ await fixture.build();
+ });
+
+ it('renders fast', async () => {
+ let html = await fixture.readFile('/index.html');
+ let $ = cheerio.load(html);
+
+ const startTimes = Array.from($('.start')).map((element) => Number(element.children[0].data));
+ const finishTimes = Array.from($('.finished')).map((element) =>
+ Number(element.children[0].data)
+ );
+
+ let renderStartWithin = Math.max(...startTimes) - Math.min(...startTimes);
+ expect(renderStartWithin).to.be.lessThan(
+ 10, // in theory, this should be 0, so 10ms tolerance
+ "The components didn't start rendering in parallel"
+ );
+
+ const totalRenderTime = Math.max(...finishTimes) - Math.min(...startTimes);
+ expect(totalRenderTime).to.be.lessThan(
+ 60, // max component delay is 40ms
+ 'The total render time was significantly longer than the max component delay'
+ );
+ });
+});