Parallelize rendering of sibling components to avoid async waterfalls

.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,16 @@ export class RenderTemplateResult {
 	async *[Symbol.asyncIterator]() {
 		const { htmlParts, expressions } = this;
 
+		let iterables: Array<AsyncIterable<any>> = [];
+		for (let i = 0; i < htmlParts.length; i++) {
+			iterables.push(new EagerAsyncIterableIterator(renderChild(expressions[i])));
+		}
 		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,11 @@ export async function renderPage(
 										}
 									}
 								}
+								if (chunk instanceof Response) {
+									throw new AstroError({
+										...AstroErrorData.ResponseSentError,
+									});
+								}
 
 								const bytes = chunkToByteArray(result, chunk);
 								controller.enqueue(bytes);

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

@@ -135,3 +135,79 @@ export function renderElement(
 	}
 	return `<${name}${internalSpreadAttributes(props, shouldEscape)}>${children}</${name}>`;
 }
+
+// This eagering consumes an AsyncIterable 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;
+	constructor(iterable: AsyncIterable<any>) {
+		this.#iterable = iterable;
+		this.#run();
+	}
+
+	async #run() {
+		let gen = this.#iterable[Symbol.asyncIterator]();
+		let value: IteratorResult<any, any> | undefined = undefined;
+		do {
+			this.#next = 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;
+		}
+		if (!this.#queue.isEmpty()) {
+			return this.#queue.shift()!;
+		}
+		await this.#next;
+		return this.#queue.shift()!;
+	}
+
+	[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,24 @@
+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);
+
+		let firstStart = Number($('.start').first().text());
+		let lastStart = Number($('.start').last().text());
+		let timeTook = lastStart - firstStart;
+		expect(timeTook).to.be.lessThan(50, 'the components in the list were kicked off more-or-less at the same time.');
+	});
+});