feat: add experimental client prerender

packages/astro/src/@types/astro.ts

@@ -1566,6 +1566,21 @@ export interface AstroUserConfig {
 		 * ```
 		 */
 		contentCollectionCache?: boolean;
+
+		/**
+		 * @docs
+		 * @name experimental.clientPrerender
+		 * @type {boolean}
+		 * @default `false`
+		 * @description
+		 * Progressive enhancement to use the experimental Speculation Rules API
+		 * when supported to prerender on the client. Use this setting to prerender the
+		 * page on the client, including running client side JavaScript
+		 * (see [unsafe prefetching](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API#unsafe_prefetching)).
+		 *
+		 * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API)
+		 */
+		clientPrerender?: boolean;
 	};
 }
 

packages/astro/src/core/config/schema.ts

@@ -58,6 +58,7 @@ const ASTRO_CONFIG_DEFAULTS = {
 	experimental: {
 		optimizeHoistedScript: false,
 		contentCollectionCache: false,
+		clientPrerender: false,
 	},
 } satisfies AstroUserConfig & { server: { open: boolean } };
 
@@ -393,6 +394,10 @@ export const AstroConfigSchema = z.object({
 				.boolean()
 				.optional()
 				.default(ASTRO_CONFIG_DEFAULTS.experimental.contentCollectionCache),
+			clientPrerender: z
+				.boolean()
+				.optional()
+				.default(ASTRO_CONFIG_DEFAULTS.experimental.clientPrerender),
 		})
 		.strict(
 			`Invalid or outdated experimental feature.\nCheck for incorrect spelling or outdated Astro version.\nSee https://docs.astro.build/en/reference/configuration-reference/#experimental-flags for a list of all current experiments.`

packages/astro/src/prefetch/index.ts

@@ -16,6 +16,8 @@ const listenedAnchors = new WeakSet<HTMLAnchorElement>();
 let prefetchAll: boolean = __PREFETCH_PREFETCH_ALL__;
 // @ts-expect-error injected global
 let defaultStrategy: string = __PREFETCH_DEFAULT_STRATEGY__;
+// @ts-expect-error injected global
+let clientPrerender: boolean = __EXPERIMENTAL_CLIENT_PRERENDER__;
 
 interface InitOptions {
 	defaultStrategy?: string;
@@ -216,7 +218,14 @@ export function prefetch(url: string, opts?: PrefetchOptions) {
 	const priority = opts?.with ?? 'link';
 	debug?.(`[astro] Prefetching ${url} with ${priority}`);
 
-	if (priority === 'link') {
+	if (
+		clientPrerender &&
+		HTMLScriptElement.supports &&
+		HTMLScriptElement.supports('speculationrules')
+	) {
+		// this code is tree-shaken if unused
+		appendSpeculationRules(url);
+	} else if (priority === 'link') {
 		const link = document.createElement('link');
 		link.rel = 'prefetch';
 		link.setAttribute('href', url);
@@ -301,3 +310,26 @@ function onPageLoad(cb: () => void) {
 		cb();
 	});
 }
+
+/**
+ * Appends a `<script type="speculationRules">` tag to the head of the
+ * document that prerenders the `url` passed in.
+ *
+ * Modifying the script and appending a new link does not trigger the prerender.
+ * A new script must be added for each `url`.
+ *
+ * @param url The url of the page to prerender.
+ */
+function appendSpeculationRules(url: string) {
+	const script = document.createElement('script');
+	script.type = 'speculationrules';
+	script.textContent = JSON.stringify({
+		prerender: [
+			{
+				source: 'list',
+				urls: [url],
+			},
+		],
+	});
+	document.head.append(script);
+}

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

@@ -49,7 +49,11 @@ export default function astroPrefetch({ settings }: { settings: AstroSettings })
 			if (id.includes(prefetchInternalModuleFsSubpath)) {
 				return code
 					.replace('__PREFETCH_PREFETCH_ALL__', JSON.stringify(prefetch?.prefetchAll))
-					.replace('__PREFETCH_DEFAULT_STRATEGY__', JSON.stringify(prefetch?.defaultStrategy));
+					.replace('__PREFETCH_DEFAULT_STRATEGY__', JSON.stringify(prefetch?.defaultStrategy))
+					.replace(
+						'__EXPERIMENTAL_CLIENT_PRERENDER__',
+						JSON.stringify(settings.config.experimental.clientPrerender)
+					);
 			}
 		},
 	};