perf(runtime): improve rendering performance

.changeset/fresh-otters-run.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Improves server-side rendering performance

packages/astro/src/core/fetch/fetch-state.ts

@@ -50,6 +50,14 @@ import { getRouteCache } from '../render/route-cache.js';
 import { getRouteTable, matchAllRoutes, matchRoute } from '../routing/route-table.js';
 import { getServerIslands } from '../server-islands/mappings.js';
 
+const slotValuesSymbol = Symbol('astro.slotValues');
+
+type AstroSlotValues = {
+	[slotValuesSymbol]: Record<string, any> | null;
+};
+
+type AstroComponentPartial = Omit<AstroGlobal, 'self' | 'slots'> & Partial<AstroSlotValues>;
+
 /**
  * Per-render facade inputs passed by `BaseApp.render`'s fast path to the
  * internal `FetchState` constructor and stored as plain state fields.
@@ -539,20 +547,15 @@ export class FetchState implements AstroFetchState {
 		}
 		this.#astroPagePartial ??= this.createAstroPagePartial(result, apiContext);
 		astroPagePartial = this.#astroPagePartial;
-		const astroComponentPartial = { props, self: null };
-		const Astro: Omit<AstroGlobal, 'self' | 'slots'> = Object.assign(
-			Object.create(astroPagePartial),
-			astroComponentPartial,
-		);
-
-		let _slots: AstroGlobal['slots'];
-		Object.defineProperty(Astro, 'slots', {
-			get: () => {
-				if (!_slots) {
-					_slots = new Slots(result, slotValues, this.logger) as unknown as AstroGlobal['slots'];
-				}
-				return _slots;
-			},
+		const Astro: AstroComponentPartial = Object.assign(Object.create(astroPagePartial), {
+			props,
+			self: null,
+		});
+		Object.defineProperty(Astro, slotValuesSymbol, {
+			value: slotValues,
+			writable: true,
+			configurable: true,
+			enumerable: false,
 		});
 
 		return Astro as AstroGlobal;
@@ -588,6 +591,19 @@ export class FetchState implements AstroFetchState {
 			routePattern: this.routeData!.route,
 			isPrerendered: this.routeData!.prerender,
 			cookies,
+			get slots(): Slots {
+				const slotsByAstro = (result._metadata.slotsByAstro ??= new WeakMap());
+				let slots = slotsByAstro.get(this);
+				if (slots === undefined) {
+					slots = new Slots(
+						result,
+						(this as Partial<AstroSlotValues>)[slotValuesSymbol] ?? null,
+						logger,
+					);
+					slotsByAstro.set(this, slots);
+				}
+				return slots;
+			},
 			get clientAddress() {
 				return state.getClientAddress();
 			},

packages/astro/src/runtime/server/escape.ts

@@ -1,8 +1,35 @@
-import { escape } from 'html-escaper';
 import { streamAsyncIterator } from './util.js';
 
-// Leverage the battle-tested `html-escaper` npm package.
-export const escapeHTML = escape;
+const ESCAPABLE = /[&<>'"]/g;
+
+function entityFor(code: number): string {
+	switch (code) {
+		case 38:
+			return '&amp;';
+		case 60:
+			return '&lt;';
+		case 62:
+			return '&gt;';
+		case 39:
+			return '&#39;';
+		default:
+			return '&quot;';
+	}
+}
+
+export function escapeHTML(value: string): string {
+	ESCAPABLE.lastIndex = 0;
+	if (!ESCAPABLE.test(value)) return value;
+	let output = '';
+	let last = 0;
+	do {
+		const index = ESCAPABLE.lastIndex - 1;
+		if (last !== index) output += value.slice(last, index);
+		output += entityFor(value.charCodeAt(index));
+		last = index + 1;
+	} while (ESCAPABLE.test(value));
+	return last === value.length ? output : output + value.slice(last);
+}
 
 /**
  * Serializes a value to a JSON string that is safe to embed inside a `<script>` tag.
@@ -36,9 +63,9 @@ const htmlStringSymbol = Symbol.for('astro:html-string');
  * A "blessed" extension of String that tells Astro that the string
  * has already been escaped. This helps prevent double-escaping of HTML.
  */
-export class HTMLString extends String {
-	[htmlStringSymbol] = true;
-}
+export class HTMLString extends String {}
+
+Object.defineProperty(HTMLString.prototype, htmlStringSymbol, { value: true });
 
 type BlessedType = string | HTMLBytes;
 
@@ -64,7 +91,7 @@ export const markHTMLString = (value: any) => {
 };
 
 export function isHTMLString(value: any): value is HTMLString {
-	return !!value?.[htmlStringSymbol];
+	return typeof value === 'object' && value !== null && value[htmlStringSymbol] === true;
 }
 
 function markHTMLBytes(bytes: Uint8Array) {

packages/astro/src/runtime/server/hydration.ts

@@ -24,7 +24,7 @@ interface ExtractedProps {
 	propsWithoutTransitionAttributes: Props;
 }
 
-const transitionDirectivesToCopyOnIsland = Object.freeze([
+const transitionDirectivesToCopyOnIsland = new Set([
 	'data-astro-transition-scope',
 	'data-astro-transition-persist',
 	'data-astro-transition-persist-props',
@@ -42,7 +42,8 @@ export function extractDirectives(
 		props: {},
 		propsWithoutTransitionAttributes: {},
 	};
-	for (const [key, value] of Object.entries(inputProps)) {
+	for (const key of Object.keys(inputProps)) {
+		const value = inputProps[key];
 		if (key.startsWith('server:')) {
 			if (key === 'server:root') {
 				extracted.isPage = true;
@@ -101,7 +102,7 @@ export function extractDirectives(
 			}
 		} else {
 			extracted.props[key] = value;
-			if (!transitionDirectivesToCopyOnIsland.includes(key)) {
+			if (!transitionDirectivesToCopyOnIsland.has(key)) {
 				extracted.propsWithoutTransitionAttributes[key] = value;
 			}
 		}
@@ -148,7 +149,7 @@ export async function generateHydrateScript(
 	// Attach renderer-provided attributes
 	if (attrs) {
 		for (const [key, value] of Object.entries(attrs)) {
-			island.props[key] = escapeHTML(value);
+			island.props[key] = escapeHTML(String(value));
 		}
 	}
 

packages/astro/src/runtime/server/index.ts

@@ -90,8 +90,8 @@ export function spreadAttributes(
 			values.class = scopedClassName;
 		}
 	}
-	for (const [key, value] of Object.entries(values)) {
-		output += addAttribute(value, key, true, _name);
+	for (const key of Object.keys(values)) {
+		output += addAttribute(values[key], key, true, _name);
 	}
 	return markHTMLString(output);
 }

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

@@ -1,7 +1,7 @@
 import { escapeHTML, isHTMLString, markHTMLString } from '../escape.js';
 import { isPromise } from '../util.js';
-import { isAstroComponentInstance, isRenderTemplateResult } from './astro/index.js';
 import { isRenderInstance, type RenderDestination } from './common.js';
+import { isRenderInstruction } from './instruction.js';
 import { SlotString } from './slot.js';
 import { createBufferedRenderer } from './util.js';
 
@@ -13,10 +13,20 @@ export function renderChild(destination: RenderDestination, child: any): void |
 		return;
 	}
 
+	// Must precede `isRenderInstance`: a `renderer-hydration-script` instruction has a `render` property.
+	if (isRenderInstruction(child)) {
+		destination.write(child);
+		return;
+	}
+
 	if (isPromise(child)) {
 		return child.then((x) => renderChild(destination, x));
 	}
 
+	if (isRenderInstance(child)) {
+		return child.render(destination);
+	}
+
 	if (child instanceof SlotString) {
 		destination.write(child);
 		return;
@@ -43,18 +53,6 @@ export function renderChild(destination: RenderDestination, child: any): void |
 		return renderChild(destination, child());
 	}
 
-	if (isRenderInstance(child)) {
-		return child.render(destination);
-	}
-
-	if (isRenderTemplateResult(child)) {
-		return child.render(destination);
-	}
-
-	if (isAstroComponentInstance(child)) {
-		return child.render(destination);
-	}
-
 	if (ArrayBuffer.isView(child)) {
 		destination.write(child);
 		return;

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

@@ -10,6 +10,7 @@ import { isHeadAndContent } from './head-and-content.js';
 type ComponentProps = Record<string | number, any>;
 
 const astroComponentInstanceSym = Symbol.for('astro.componentInstance');
+const CLIENT_DIRECTIVE_PREFIX = 'client:';
 
 export class AstroComponentInstance {
 	[astroComponentInstanceSym] = true;
@@ -28,8 +29,11 @@ export class AstroComponentInstance {
 		this.result = result;
 		this.props = props;
 		this.factory = factory;
-		this.slotValues = {};
+		this.slotValues = slots;
 		for (const name in slots) {
+			if (this.slotValues === slots) {
+				this.slotValues = {};
+			}
 			// prerender the slots eagerly to make collection entries propagate styles and scripts
 			let didRender = false;
 			let value = slots[name](result);
@@ -74,6 +78,9 @@ export class AstroComponentInstance {
 		return this.returnValue;
 	}
 
+	// NOTE: This render call can't be pre-invoked outside of this function as it'll also initialize the slots
+	// recursively, which causes each Astro components in the tree to be called bottom-up, and is incorrect.
+	// The slots are initialized eagerly for head propagation.
 	render(destination: RenderDestination): void | Promise<void> {
 		const returnValue = this.init(this.result);
 
@@ -100,9 +107,11 @@ function validateComponentProps(
 	displayName: string,
 ) {
 	if (props != null) {
-		const directives = [...clientDirectives.keys()].map((directive) => `client:${directive}`);
-		for (const prop of Object.keys(props)) {
-			if (directives.includes(prop)) {
+		for (const prop in props) {
+			if (
+				prop.startsWith(CLIENT_DIRECTIVE_PREFIX) &&
+				clientDirectives.has(prop.slice(CLIENT_DIRECTIVE_PREFIX.length))
+			) {
 				console.warn(
 					`You are attempting to render <${displayName} ${prop} />, but ${displayName} is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.`,
 				);

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

@@ -6,30 +6,49 @@ import { createBufferedRenderer } from '../util.js';
 
 const renderTemplateResultSym = Symbol.for('astro.renderTemplateResult');
 
+const markedHtmlParts = new WeakMap<TemplateStringsArray, string[]>();
+
+function markHtmlParts(htmlParts: TemplateStringsArray): string[] {
+	let marked = markedHtmlParts.get(htmlParts);
+	if (marked === undefined) {
+		marked = new Array(htmlParts.length);
+		for (let i = 0; i < htmlParts.length; i++) {
+			marked[i] = htmlParts[i] ? markHTMLString(htmlParts[i]) : htmlParts[i];
+		}
+		markedHtmlParts.set(htmlParts, marked);
+	}
+	return marked;
+}
+
 // The return value when rendering a component.
 // This is the result of calling render(), should this be named to RenderResult or...?
 export class RenderTemplateResult {
 	public [renderTemplateResultSym] = true;
 	readonly htmlParts: TemplateStringsArray;
 	public expressions: any[];
 	private error: Error | undefined;
+	private wrapped: Set<number> | undefined;
 	constructor(htmlParts: TemplateStringsArray, expressions: unknown[]) {
 		this.htmlParts = htmlParts;
 		this.error = undefined;
-		this.expressions = expressions.map((expression) => {
-			// Wrap Promise expressions so we can catch errors
-			// There can only be 1 error that we rethrow from an Astro component,
-			// so this keeps track of whether or not we have already done so.
-			if (isPromise(expression)) {
-				return Promise.resolve(expression).catch((err) => {
-					if (!this.error) {
-						this.error = err;
-						throw err;
-					}
-				});
+		this.expressions = expressions;
+	}
+
+	catchExpressionError(index: number, expression: unknown): Promise<unknown> {
+		// Wrap Promise expressions so we can catch errors
+		// There can only be 1 error that we rethrow from an Astro component,
+		// so this keeps track of whether or not we have already done so.
+		// Re-wrapping hits the `this.error` guard and resolves, swallowing the rejection.
+		if (this.wrapped?.has(index)) return expression as Promise<unknown>;
+		const wrapped = Promise.resolve(expression).catch((err) => {
+			if (!this.error) {
+				this.error = err;
+				throw err;
 			}
-			return expression;
 		});
+		(this.wrapped ??= new Set()).add(index);
+		this.expressions[index] = wrapped;
+		return wrapped;
 	}
 
 	render(destination: RenderDestination): void | Promise<void> {
@@ -41,20 +60,22 @@ export class RenderTemplateResult {
 		//
 		// Template structure: html[0] exp[0] html[1] exp[1] ... html[N]
 		// (htmlParts.length === expressions.length + 1)
-		const { htmlParts, expressions } = this;
+		const { expressions } = this;
+		const htmlParts = markHtmlParts(this.htmlParts);
 
 		for (let i = 0; i < htmlParts.length; i++) {
 			const html = htmlParts[i];
 			if (html) {
-				destination.write(markHTMLString(html));
+				destination.write(html);
 			}
 
 			// expressions[i] doesn't exist for the last htmlPart
 			if (i >= expressions.length) break;
 
-			const exp = expressions[i];
+			let exp = expressions[i];
 			// Skip render if falsy, except the number 0
 			if (!(exp || exp === 0)) continue;
+			if (isPromise(exp)) exp = this.catchExpressionError(i, exp);
 
 			const result = renderChild(destination, exp);
 
@@ -65,7 +86,8 @@ export class RenderTemplateResult {
 				const remaining = expressions.length - startIdx;
 				const flushers = new Array(remaining);
 				for (let j = 0; j < remaining; j++) {
-					const rExp = expressions[startIdx + j];
+					let rExp = expressions[startIdx + j];
+					if (isPromise(rExp)) rExp = this.catchExpressionError(startIdx + j, rExp);
 					flushers[j] = createBufferedRenderer(destination, (bufferDestination) => {
 						if (rExp || rExp === 0) {
 							return renderChild(bufferDestination, rExp);
@@ -80,7 +102,7 @@ export class RenderTemplateResult {
 							// Write the HTML part that precedes this expression
 							const rHtml = htmlParts[startIdx + k];
 							if (rHtml) {
-								destination.write(markHTMLString(rHtml));
+								destination.write(rHtml);
 							}
 
 							const flushResult = flushers[k++].flush();
@@ -91,7 +113,7 @@ export class RenderTemplateResult {
 						// Write the final trailing HTML part
 						const lastHtml = htmlParts[htmlParts.length - 1];
 						if (lastHtml) {
-							destination.write(markHTMLString(lastHtml));
+							destination.write(lastHtml);
 						}
 					};
 					return iterate();