feat(runtime): use queued based rendering (#15471)

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>
Co-authored-by: Yan <61414485+yanthomasdev@users.noreply.github.com>
Co-authored-by: Armand Philippot <git@armand.philippot.eu>

Author: 4 people

.changeset/hot-eyes-sink.md

@@ -0,0 +1,63 @@
+---
+'astro': minor
+---
+
+Adds a new experimental flag `queuedRendering` to enable a queue-based rendering engine 
+
+The new engine is based on a two-pass process, where the first pass
+traverses the tree of components, emits an ordered queue, and then the queue is rendered. 
+
+The new engine does not use recursion, and comes with two customizable options.
+
+Early benchmarks showed significant speed improvements and memory efficiency in big projects.
+
+#### Queue-rendered based
+
+The new engine can be enabled in your Astro config with `experimental.queuedRendering.enabled` set to `true`, and can be further customized with additional sub-features.
+
+```js
+// astro.config.mjs
+export default defineConfig({
+  experimental: {
+    queuedRendering: {
+      enabled: true
+    }
+  }
+})
+```
+
+#### Pooling
+
+With the new engine enabled, you now have the option to have a pool of nodes that can be saved and reused across page rendering. Node pooling has no effect when rendering pages on demand (SSR) because these rendering requests don't share memory. However, it can be very useful for performance when building static pages.
+
+```js
+// astro.config.mjs
+export default defineConfig({
+  experimental: {
+    queuedRendering: {
+      enabled: true,
+      poolSize: 2000 // store up to 2k nodes to be reused across renderers
+    }
+  }
+});
+```
+
+#### Content caching
+
+The new engine additionally unlocks a new `contentCache` option. This allows you to cache values of nodes during the rendering phase. This is currently a boolean feature with no further customization (e.g. size of cache) that uses sensible defaults for most large content collections:
+
+When disabled, the pool engine won't cache strings, but only types.
+
+```js
+// astro.config.mjs
+export default defineConfig({
+  experimental: {
+    queuedRendering: {
+      enabled: true,
+      contentCache: true // enable re-use of node values
+    }
+  }
+});
+```
+
+For more information on enabling and using this feature in your project, see the [experimental queued rendering docs](https://v6.docs.astro.build/en/reference/experimental-flags/queued-rendering/) for more details.

.github/workflows/continuous_benchmark.yml

@@ -27,7 +27,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        shard: [ "1/4","2/4", "3/4", "4/4" ]
+        shard: [ "1/4", "2/4", "3/4", "4/4" ]
     permissions:
       contents: read
       pull-requests: write

benchmark/packages/adapter/src/index.ts

@@ -17,7 +17,7 @@ export default function createIntegration(): AstroIntegration {
 				setAdapter({
 					name: '@benchmark/adapter',
 					serverEntrypoint: '@benchmark/adapter/server.js',
-					exports: ['manifest', 'createApp'],
+					exports: ['manifest', 'createApp', 'App'],
 					supportedAstroFeatures: {
 						serverOutput: 'stable',
 						envGetSecret: 'experimental',

benchmark/packages/adapter/src/server.ts

@@ -38,5 +38,7 @@ export function createExports(manifest: SSRManifest) {
 	return {
 		manifest,
 		createApp: (streaming: boolean) => new MyApp(manifest, streaming),
+		// Export App class directly for benchmarks that need to pass custom manifests
+		App: MyApp,
 	};
 }

benchmark/static-projects/build-hybrid/astro.config.js

@@ -4,5 +4,5 @@ import node from '@astrojs/node';
 export default defineConfig({
 	adapter: node({
     mode: 'standalone',
-  }),
+  })
 });

packages/astro/src/assets/vite-plugin-assets.ts

@@ -168,10 +168,10 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl
 						export { default as Picture } from "astro/components/${imageComponentPrefix}Picture.astro";
 						import { inferRemoteSize as inferRemoteSizeInternal } from "astro/assets/utils/inferRemoteSize.js";
 
-						export { default as Font } from "astro/components/Font.astro";
-						export * from "${RUNTIME_VIRTUAL_MODULE_ID}";
-						
-						export const getConfiguredImageService = _getConfiguredImageService;
+							export { default as Font } from "astro/components/Font.astro";
+							export * from "${RUNTIME_VIRTUAL_MODULE_ID}";
+														
+							export const getConfiguredImageService = _getConfiguredImageService;
 
 						export const viteFSConfig = ${JSON.stringify(resolvedConfig.server.fs ?? {})};
 

packages/astro/src/container/index.ts

@@ -176,6 +176,9 @@ function createManifest(
 			placement: undefined,
 		},
 		logLevel: 'silent',
+		experimentalQueuedRendering: manifest?.experimentalQueuedRendering ?? {
+			enabled: false,
+		},
 	};
 }
 
@@ -266,6 +269,7 @@ type AstroContainerManifest = Pick<
 	| 'serverLike'
 	| 'assetsDir'
 	| 'image'
+	| 'experimentalQueuedRendering'
 >;
 
 type AstroContainerConstructor = {

packages/astro/src/core/app/dev/pipeline.ts

@@ -9,6 +9,9 @@ import { type HeadElements, Pipeline, type TryRewriteResult } from '../../base-p
 import { ASTRO_VERSION } from '../../constants.js';
 import { createModuleScriptElement, createStylesheetElementSet } from '../../render/ssr-element.js';
 import { findRouteToRewrite } from '../../routing/rewrite.js';
+import { newNodePool } from '../../../runtime/server/render/queue/pool.js';
+import { HTMLStringCache } from '../../../runtime/server/html-string-cache.js';
+import { queueRenderingEnabled } from '../manifest.js';
 
 type DevPipelineCreate = Pick<NonRunnablePipeline, 'logger' | 'manifest' | 'streaming'>;
 
@@ -45,6 +48,10 @@ export class NonRunnablePipeline extends Pipeline {
 			undefined,
 			undefined,
 		);
+		if (queueRenderingEnabled(manifest.experimentalQueuedRendering)) {
+			pipeline.nodePool = newNodePool(manifest.experimentalQueuedRendering!);
+			pipeline.htmlStringCache = new HTMLStringCache(1000); // Use default size
+		}
 		return pipeline;
 	}
 

packages/astro/src/core/app/manifest.ts

@@ -129,3 +129,18 @@ export function deserializeRouteInfo(rawRouteInfo: SerializedRouteInfo): RouteIn
 		routeData: deserializeRouteData(rawRouteInfo.routeData),
 	};
 }
+
+export function queuePoolSize(
+	config: NonNullable<SSRManifest['experimentalQueuedRendering']>,
+): number {
+	return config?.poolSize ?? 1000;
+}
+export function queueContentCache(
+	config: NonNullable<SSRManifest['experimentalQueuedRendering']>,
+): boolean {
+	return config?.contentCache ?? false;
+}
+
+export function queueRenderingEnabled(config: SSRManifest['experimentalQueuedRendering']): boolean {
+	return config?.enabled ?? false;
+}

packages/astro/src/core/app/pipeline.ts

@@ -12,7 +12,6 @@ import {
 import { getFallbackRoute, routeIsFallback, routeIsRedirect } from '../routing/helpers.js';
 import { findRouteToRewrite } from '../routing/rewrite.js';
 import { createConsoleLogger } from './logging.js';
-
 export class AppPipeline extends Pipeline {
 	getName(): string {
 		return 'AppPipeline';