From d47baa466aaeedde9c79ed5375d0be34762ac8b6 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Tue, 7 May 2024 13:13:03 -0400
Subject: [PATCH 1/7] Support React 19 (#10942)

* Support React 19

* Fix lint

* Update .changeset/short-phones-breathe.md

* fix: update types peer dep

---------

Co-authored-by: bholmesdev <hey@bholmes.dev>
---
 .changeset/short-phones-breathe.md       |  5 ++
 packages/integrations/react/package.json |  8 +--
 packages/integrations/react/src/index.ts | 67 +++++++++++++++++-------
 3 files changed, 57 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/short-phones-breathe.md

diff --git a/.changeset/short-phones-breathe.md b/.changeset/short-phones-breathe.md
new file mode 100644
index 000000000000..d27d015afbec
--- /dev/null
+++ b/.changeset/short-phones-breathe.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/react": patch
+---
+
+Updates package to support React 19 beta
diff --git a/packages/integrations/react/package.json b/packages/integrations/react/package.json
index 90eaba4c3f3d..e088be21d8cc 100644
--- a/packages/integrations/react/package.json
+++ b/packages/integrations/react/package.json
@@ -60,10 +60,10 @@
     "vite": "^5.2.10"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.50 || ^18.0.21",
-    "@types/react-dom": "^17.0.17 || ^18.0.6",
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0"
+    "@types/react": "^17.0.50 || ^18.0.21 || npm:types-react@beta",
+    "@types/react-dom": "^17.0.17 || ^18.0.6 || npm:types-react-dom@beta",
+    "react": "^17.0.2 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0-beta"
   },
   "engines": {
     "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts
index e0149e8e76c1..62803e788c8f 100644
--- a/packages/integrations/react/src/index.ts
+++ b/packages/integrations/react/src/index.ts
@@ -12,15 +12,44 @@ export type ReactIntegrationOptions = Pick<
 
 const FAST_REFRESH_PREAMBLE = react.preambleCode;
 
-function getRenderer() {
+const versionsConfig = {
+	17: {
+		server: '@astrojs/react/server-v17.js',
+		client: '@astrojs/react/client-v17.js',
+		externals: ['react-dom/server.js', 'react-dom/client.js'],
+	},
+	18: {
+		server: '@astrojs/react/server.js',
+		client: '@astrojs/react/client.js',
+		externals: ['react-dom/server', 'react-dom/client']
+	},
+	19: {
+		server: '@astrojs/react/server.js',
+		client: '@astrojs/react/client.js',
+		externals: ['react-dom/server', 'react-dom/client']
+	}
+};
+
+type SupportedReactVersion = keyof (typeof versionsConfig);
+type ReactVersionConfig = (typeof versionsConfig)[SupportedReactVersion];
+
+function getReactMajorVersion(): number {
+	const matches = /\d+\./.exec(ReactVersion);
+	if(!matches) {
+		return NaN;
+	}
+	return Number(matches[0]);
+}
+
+function isUnsupportedVersion(majorVersion: number) {
+	return majorVersion < 17 || majorVersion > 19 || Number.isNaN(majorVersion);
+}
+
+function getRenderer(reactConfig: ReactVersionConfig) {
 	return {
 		name: '@astrojs/react',
-		clientEntrypoint: ReactVersion.startsWith('18.')
-			? '@astrojs/react/client.js'
-			: '@astrojs/react/client-v17.js',
-		serverEntrypoint: ReactVersion.startsWith('18.')
-			? '@astrojs/react/server.js'
-			: '@astrojs/react/server-v17.js',
+		clientEntrypoint: reactConfig.client,
+		serverEntrypoint: reactConfig.server,
 	};
 }
 
@@ -51,22 +80,18 @@ function getViteConfiguration({
 	exclude,
 	babel,
 	experimentalReactChildren,
-}: ReactIntegrationOptions = {}) {
+}: ReactIntegrationOptions = {}, reactConfig: ReactVersionConfig) {
 	return {
 		optimizeDeps: {
 			include: [
-				ReactVersion.startsWith('18.')
-					? '@astrojs/react/client.js'
-					: '@astrojs/react/client-v17.js',
+				reactConfig.client,
 				'react',
 				'react/jsx-runtime',
 				'react/jsx-dev-runtime',
 				'react-dom',
 			],
 			exclude: [
-				ReactVersion.startsWith('18.')
-					? '@astrojs/react/server.js'
-					: '@astrojs/react/server-v17.js',
+				reactConfig.server,
 			],
 		},
 		plugins: [react({ include, exclude, babel }), optionsPlugin(!!experimentalReactChildren)],
@@ -74,9 +99,7 @@ function getViteConfiguration({
 			dedupe: ['react', 'react-dom', 'react-dom/server'],
 		},
 		ssr: {
-			external: ReactVersion.startsWith('18.')
-				? ['react-dom/server', 'react-dom/client']
-				: ['react-dom/server.js', 'react-dom/client.js'],
+			external: reactConfig.externals,
 			noExternal: [
 				// These are all needed to get mui to work.
 				'@mui/material',
@@ -95,13 +118,19 @@ export default function ({
 	babel,
 	experimentalReactChildren,
 }: ReactIntegrationOptions = {}): AstroIntegration {
+	const majorVersion = getReactMajorVersion();
+	if(isUnsupportedVersion(majorVersion)) {
+		throw new Error(`Unsupported React version: ${majorVersion}.`);
+	}
+	const versionConfig = versionsConfig[majorVersion as SupportedReactVersion];
+
 	return {
 		name: '@astrojs/react',
 		hooks: {
 			'astro:config:setup': ({ command, addRenderer, updateConfig, injectScript }) => {
-				addRenderer(getRenderer());
+				addRenderer(getRenderer(versionConfig));
 				updateConfig({
-					vite: getViteConfiguration({ include, exclude, babel, experimentalReactChildren }),
+					vite: getViteConfiguration({ include, exclude, babel, experimentalReactChildren }, versionConfig),
 				});
 				if (command === 'dev') {
 					const preamble = FAST_REFRESH_PREAMBLE.replace(`__BASE__`, '/');

From cceeafb62adf96b6f52b87024d774a30adf7f376 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthewp@users.noreply.github.com>
Date: Tue, 7 May 2024 17:13:57 +0000
Subject: [PATCH 2/7] [ci] format

---
 packages/integrations/react/src/index.ts | 31 ++++++++++++------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/integrations/react/src/index.ts b/packages/integrations/react/src/index.ts
index 62803e788c8f..838640239ee3 100644
--- a/packages/integrations/react/src/index.ts
+++ b/packages/integrations/react/src/index.ts
@@ -21,21 +21,21 @@ const versionsConfig = {
 	18: {
 		server: '@astrojs/react/server.js',
 		client: '@astrojs/react/client.js',
-		externals: ['react-dom/server', 'react-dom/client']
+		externals: ['react-dom/server', 'react-dom/client'],
 	},
 	19: {
 		server: '@astrojs/react/server.js',
 		client: '@astrojs/react/client.js',
-		externals: ['react-dom/server', 'react-dom/client']
-	}
+		externals: ['react-dom/server', 'react-dom/client'],
+	},
 };
 
-type SupportedReactVersion = keyof (typeof versionsConfig);
+type SupportedReactVersion = keyof typeof versionsConfig;
 type ReactVersionConfig = (typeof versionsConfig)[SupportedReactVersion];
 
 function getReactMajorVersion(): number {
 	const matches = /\d+\./.exec(ReactVersion);
-	if(!matches) {
+	if (!matches) {
 		return NaN;
 	}
 	return Number(matches[0]);
@@ -75,12 +75,10 @@ function optionsPlugin(experimentalReactChildren: boolean): vite.Plugin {
 	};
 }
 
-function getViteConfiguration({
-	include,
-	exclude,
-	babel,
-	experimentalReactChildren,
-}: ReactIntegrationOptions = {}, reactConfig: ReactVersionConfig) {
+function getViteConfiguration(
+	{ include, exclude, babel, experimentalReactChildren }: ReactIntegrationOptions = {},
+	reactConfig: ReactVersionConfig
+) {
 	return {
 		optimizeDeps: {
 			include: [
@@ -90,9 +88,7 @@ function getViteConfiguration({
 				'react/jsx-dev-runtime',
 				'react-dom',
 			],
-			exclude: [
-				reactConfig.server,
-			],
+			exclude: [reactConfig.server],
 		},
 		plugins: [react({ include, exclude, babel }), optionsPlugin(!!experimentalReactChildren)],
 		resolve: {
@@ -119,7 +115,7 @@ export default function ({
 	experimentalReactChildren,
 }: ReactIntegrationOptions = {}): AstroIntegration {
 	const majorVersion = getReactMajorVersion();
-	if(isUnsupportedVersion(majorVersion)) {
+	if (isUnsupportedVersion(majorVersion)) {
 		throw new Error(`Unsupported React version: ${majorVersion}.`);
 	}
 	const versionConfig = versionsConfig[majorVersion as SupportedReactVersion];
@@ -130,7 +126,10 @@ export default function ({
 			'astro:config:setup': ({ command, addRenderer, updateConfig, injectScript }) => {
 				addRenderer(getRenderer(versionConfig));
 				updateConfig({
-					vite: getViteConfiguration({ include, exclude, babel, experimentalReactChildren }, versionConfig),
+					vite: getViteConfiguration(
+						{ include, exclude, babel, experimentalReactChildren },
+						versionConfig
+					),
 				});
 				if (command === 'dev') {
 					const preamble = FAST_REFRESH_PREAMBLE.replace(`__BASE__`, '/');

From 685fc22bc6247be69a34c3f6945dec058c19fd71 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Wed, 8 May 2024 17:24:47 +0800
Subject: [PATCH 3/7] Improve content collection styles and scripts build perf
 (#10959)

* Improve content collection styles and scripts build perf

* Update test

It was actually a bug. There was an empty module script injected.

* Skip test

* Fix test not matching non-ccc behaviour

* Workaround bug to make test pass

* Update .changeset/grumpy-pillows-develop.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .changeset/grumpy-pillows-develop.md          |  5 +
 .../src/content/vite-plugin-content-assets.ts | 59 ++++-------
 packages/astro/src/core/build/internal.ts     | 11 ++-
 packages/astro/src/core/build/page-data.ts    |  4 -
 .../src/core/build/plugins/plugin-analyzer.ts | 99 ++++---------------
 .../src/core/build/plugins/plugin-content.ts  | 14 ++-
 .../src/core/build/plugins/plugin-css.ts      | 68 ++++---------
 .../build/plugins/plugin-hoisted-scripts.ts   | 53 ++++------
 packages/astro/src/core/build/types.ts        |  2 -
 ...collections-css-inline-stylesheets.test.js |  5 +-
 ...imental-content-collections-render.test.js |  2 +-
 .../css-inline-stylesheets-3/package.json     |  8 ++
 .../src/components/Button.astro               | 86 ++++++++++++++++
 .../src/content/en/endeavour.md               | 15 +++
 .../css-inline-stylesheets-3/src/imported.css | 15 +++
 .../src/layouts/Layout.astro                  | 35 +++++++
 .../src/pages/index.astro                     | 17 ++++
 .../mdx/test/css-head-mdx.test.js             |  2 +-
 pnpm-lock.yaml                                |  6 ++
 19 files changed, 287 insertions(+), 219 deletions(-)
 create mode 100644 .changeset/grumpy-pillows-develop.md
 create mode 100644 packages/astro/test/fixtures/css-inline-stylesheets-3/package.json
 create mode 100644 packages/astro/test/fixtures/css-inline-stylesheets-3/src/components/Button.astro
 create mode 100644 packages/astro/test/fixtures/css-inline-stylesheets-3/src/content/en/endeavour.md
 create mode 100644 packages/astro/test/fixtures/css-inline-stylesheets-3/src/imported.css
 create mode 100644 packages/astro/test/fixtures/css-inline-stylesheets-3/src/layouts/Layout.astro
 create mode 100644 packages/astro/test/fixtures/css-inline-stylesheets-3/src/pages/index.astro

diff --git a/.changeset/grumpy-pillows-develop.md b/.changeset/grumpy-pillows-develop.md
new file mode 100644
index 000000000000..bba2a6fdcc97
--- /dev/null
+++ b/.changeset/grumpy-pillows-develop.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Refactors internal handling of styles and scripts for content collections to improve build performance
diff --git a/packages/astro/src/content/vite-plugin-content-assets.ts b/packages/astro/src/content/vite-plugin-content-assets.ts
index 591cad3c70f6..d3228270a6dc 100644
--- a/packages/astro/src/content/vite-plugin-content-assets.ts
+++ b/packages/astro/src/content/vite-plugin-content-assets.ts
@@ -3,8 +3,7 @@ import { pathToFileURL } from 'node:url';
 import type { Plugin, Rollup } from 'vite';
 import type { AstroSettings, SSRElement } from '../@types/astro.js';
 import { getAssetsPrefix } from '../assets/utils/getAssetsPrefix.js';
-import { getParentModuleInfos, moduleIsTopLevelPage } from '../core/build/graph.js';
-import { type BuildInternals, getPageDataByViteID } from '../core/build/internal.js';
+import type { BuildInternals } from '../core/build/internal.js';
 import type { AstroBuildPlugin } from '../core/build/plugin.js';
 import type { StaticBuildOptions } from '../core/build/types.js';
 import type { ModuleLoader } from '../core/module-loader/loader.js';
@@ -163,49 +162,25 @@ export function astroConfigBuildPlugin(
 						chunk.type === 'chunk' &&
 						(chunk.code.includes(LINKS_PLACEHOLDER) || chunk.code.includes(SCRIPTS_PLACEHOLDER))
 					) {
-						let entryStyles = new Set<string>();
-						let entryLinks = new Set<string>();
-						let entryScripts = new Set<string>();
+						const entryStyles = new Set<string>();
+						const entryLinks = new Set<string>();
+						const entryScripts = new Set<string>();
 
-						if (options.settings.config.experimental.contentCollectionCache) {
-							// TODO: hoisted scripts are still handled on the pageData rather than the asset propagation point
-							for (const id of chunk.moduleIds) {
-								const _entryCss = internals.propagatedStylesMap.get(id);
-								const _entryScripts = internals.propagatedScriptsMap.get(id);
-								if (_entryCss) {
-									for (const value of _entryCss) {
-										if (value.type === 'inline') entryStyles.add(value.content);
-										if (value.type === 'external') entryLinks.add(value.src);
-									}
-								}
-								if (_entryScripts) {
-									for (const value of _entryScripts) {
-										entryScripts.add(value);
-									}
+						for (const id of chunk.moduleIds) {
+							const _entryCss = internals.propagatedStylesMap.get(id);
+							const _entryScripts = internals.propagatedScriptsMap.get(id);
+							if (_entryCss) {
+								// TODO: Separating styles and links this way is not ideal. The `entryCss` list is order-sensitive
+								// and splitting them into two sets causes the order to be lost, because styles are rendered after
+								// links. Refactor this away in the future.
+								for (const value of _entryCss) {
+									if (value.type === 'inline') entryStyles.add(value.content);
+									if (value.type === 'external') entryLinks.add(value.src);
 								}
 							}
-						} else {
-							for (const id of Object.keys(chunk.modules)) {
-								for (const pageInfo of getParentModuleInfos(id, ssrPluginContext!)) {
-									if (moduleIsTopLevelPage(pageInfo)) {
-										const pageViteID = pageInfo.id;
-										const pageData = getPageDataByViteID(internals, pageViteID);
-										if (!pageData) continue;
-
-										const _entryCss = pageData.propagatedStyles?.get(id);
-										const _entryScripts = pageData.propagatedScripts?.get(id);
-										if (_entryCss) {
-											for (const value of _entryCss) {
-												if (value.type === 'inline') entryStyles.add(value.content);
-												if (value.type === 'external') entryLinks.add(value.src);
-											}
-										}
-										if (_entryScripts) {
-											for (const value of _entryScripts) {
-												entryScripts.add(value);
-											}
-										}
-									}
+							if (_entryScripts) {
+								for (const value of _entryScripts) {
+									entryScripts.add(value);
 								}
 							}
 						}
diff --git a/packages/astro/src/core/build/internal.ts b/packages/astro/src/core/build/internal.ts
index a7ff537dc8a4..a2c74271f496 100644
--- a/packages/astro/src/core/build/internal.ts
+++ b/packages/astro/src/core/build/internal.ts
@@ -25,8 +25,6 @@ export interface BuildInternals {
 	hoistedScriptIdToHoistedMap: Map<string, Set<string>>;
 	// A mapping of hoisted script ids back to the pages which reference it
 	hoistedScriptIdToPagesMap: Map<string, Set<string>>;
-	// A mapping of hoisted script ids back to the content which reference it
-	hoistedScriptIdToContentMap: Map<string, Set<string>>;
 
 	/**
 	 * Used by the `directRenderScript` option. If script is inlined, its id and
@@ -93,7 +91,15 @@ export interface BuildInternals {
 	cachedClientEntries: string[];
 	cacheManifestUsed: boolean;
 
+	/**
+	 * Map of propagated module ids (usually something like `/Users/...blog.mdx?astroPropagatedAssets`)
+	 * to a set of stylesheets that it uses.
+	 */
 	propagatedStylesMap: Map<string, Set<StylesheetAsset>>;
+	/**
+	 * Map of propagated module ids (usually something like `/Users/...blog.mdx?astroPropagatedAssets`)
+	 * to a set of hoisted scripts that it uses.
+	 */
 	propagatedScriptsMap: Map<string, Set<string>>;
 
 	// A list of all static files created during the build. Used for SSR.
@@ -125,7 +131,6 @@ export function createBuildInternals(): BuildInternals {
 		cssModuleToChunkIdMap: new Map(),
 		hoistedScriptIdToHoistedMap,
 		hoistedScriptIdToPagesMap,
-		hoistedScriptIdToContentMap: new Map(),
 		inlinedScripts: new Map(),
 		entrySpecifierToBundleMap: new Map<string, string>(),
 		pageToBundleMap: new Map<string, string>(),
diff --git a/packages/astro/src/core/build/page-data.ts b/packages/astro/src/core/build/page-data.ts
index ce9e60622ec4..a151bae2c6f3 100644
--- a/packages/astro/src/core/build/page-data.ts
+++ b/packages/astro/src/core/build/page-data.ts
@@ -53,8 +53,6 @@ export async function collectPagesData(
 				route,
 				moduleSpecifier: '',
 				styles: [],
-				propagatedStyles: new Map(),
-				propagatedScripts: new Map(),
 				hoistedScript: undefined,
 				hasSharedModules: false,
 			};
@@ -78,8 +76,6 @@ export async function collectPagesData(
 			route,
 			moduleSpecifier: '',
 			styles: [],
-			propagatedStyles: new Map(),
-			propagatedScripts: new Map(),
 			hoistedScript: undefined,
 			hasSharedModules: false,
 		};
diff --git a/packages/astro/src/core/build/plugins/plugin-analyzer.ts b/packages/astro/src/core/build/plugins/plugin-analyzer.ts
index 5bc0c53e04ea..06ba6fe0025c 100644
--- a/packages/astro/src/core/build/plugins/plugin-analyzer.ts
+++ b/packages/astro/src/core/build/plugins/plugin-analyzer.ts
@@ -6,7 +6,6 @@ import type { AstroBuildPlugin } from '../plugin.js';
 
 import { PROPAGATED_ASSET_FLAG } from '../../../content/consts.js';
 import { prependForwardSlash } from '../../../core/path.js';
-import { isContentCollectionsCacheEnabled } from '../../../core/util.js';
 import {
 	getParentModuleInfos,
 	getTopLevelPageModuleInfos,
@@ -32,9 +31,7 @@ export function vitePluginAnalyzer(
 		const pageScripts = new Map<
 			string,
 			{
-				type: 'page' | 'content';
 				hoistedSet: Set<string>;
-				propagatedMapByImporter: Map<string, Set<string>>;
 			}
 		>();
 
@@ -53,48 +50,12 @@ export function vitePluginAnalyzer(
 				if (hoistedScripts.size) {
 					for (const parentInfo of getParentModuleInfos(from, this, isPropagatedAsset)) {
 						if (isPropagatedAsset(parentInfo.id)) {
-							if (isContentCollectionsCacheEnabled(options.settings.config)) {
-								if (!pageScripts.has(parentInfo.id)) {
-									pageScripts.set(parentInfo.id, {
-										type: 'content',
-										hoistedSet: new Set(),
-										propagatedMapByImporter: new Map(),
-									});
-								}
-								const propagaters = pageScripts.get(parentInfo.id)!.propagatedMapByImporter;
-								for (const hid of hoistedScripts) {
-									if (!propagaters.has(parentInfo.id)) {
-										propagaters.set(parentInfo.id, new Set());
-									}
-									propagaters.get(parentInfo.id)!.add(hid);
-								}
-							} else {
-								for (const nestedParentInfo of getParentModuleInfos(from, this)) {
-									if (moduleIsTopLevelPage(nestedParentInfo)) {
-										for (const hid of hoistedScripts) {
-											if (!pageScripts.has(nestedParentInfo.id)) {
-												pageScripts.set(nestedParentInfo.id, {
-													type: 'page',
-													hoistedSet: new Set(),
-													propagatedMapByImporter: new Map(),
-												});
-											}
-											const entry = pageScripts.get(nestedParentInfo.id)!;
-											if (!entry.propagatedMapByImporter.has(parentInfo.id)) {
-												entry.propagatedMapByImporter.set(parentInfo.id, new Set());
-											}
-											entry.propagatedMapByImporter.get(parentInfo.id)!.add(hid);
-										}
-									}
-								}
-							}
+							internals.propagatedScriptsMap.set(parentInfo.id, hoistedScripts);
 						} else if (moduleIsTopLevelPage(parentInfo)) {
 							for (const hid of hoistedScripts) {
 								if (!pageScripts.has(parentInfo.id)) {
 									pageScripts.set(parentInfo.id, {
-										type: 'page',
 										hoistedSet: new Set(),
-										propagatedMapByImporter: new Map(),
 									});
 								}
 								pageScripts.get(parentInfo.id)?.hoistedSet.add(hid);
@@ -105,21 +66,20 @@ export function vitePluginAnalyzer(
 			},
 
 			finalize() {
-				for (const [pageId, { hoistedSet, propagatedMapByImporter, type }] of pageScripts) {
-					let astroModuleId: string;
-					if (type === 'page') {
-						const pageData = getPageDataByViteID(internals, pageId);
-						if (!pageData) {
-							continue;
-						}
-						const { component } = pageData;
-						astroModuleId = prependForwardSlash(component);
-
-						// Keep track of the importers
-						pageData.propagatedScripts = propagatedMapByImporter;
-					} else {
-						astroModuleId = pageId;
+				// Add propagated scripts to client build,
+				// but DON'T add to pages -> hoisted script map.
+				for (const propagatedScripts of internals.propagatedScriptsMap.values()) {
+					for (const propagatedScript of propagatedScripts) {
+						internals.discoveredScripts.add(propagatedScript);
 					}
+				}
+
+				for (const [pageId, { hoistedSet }] of pageScripts) {
+					const pageData = getPageDataByViteID(internals, pageId);
+					if (!pageData) continue;
+
+					const { component } = pageData;
+					const astroModuleId = prependForwardSlash(component);
 
 					const uniqueHoistedId = JSON.stringify(Array.from(hoistedSet).sort());
 					let moduleId: string;
@@ -134,32 +94,13 @@ export function vitePluginAnalyzer(
 					}
 					internals.discoveredScripts.add(moduleId);
 
-					// Add propagated scripts to client build,
-					// but DON'T add to pages -> hoisted script map.
-					for (const propagatedScripts of propagatedMapByImporter.values()) {
-						for (const propagatedScript of propagatedScripts) {
-							internals.discoveredScripts.add(propagatedScript);
-						}
-					}
-
-					if (type === 'page') {
-						// Make sure to track that this page uses this set of hoisted scripts
-						if (internals.hoistedScriptIdToPagesMap.has(moduleId)) {
-							const pages = internals.hoistedScriptIdToPagesMap.get(moduleId);
-							pages!.add(astroModuleId);
-						} else {
-							internals.hoistedScriptIdToPagesMap.set(moduleId, new Set([astroModuleId]));
-							internals.hoistedScriptIdToHoistedMap.set(moduleId, hoistedSet);
-						}
+					// Make sure to track that this page uses this set of hoisted scripts
+					if (internals.hoistedScriptIdToPagesMap.has(moduleId)) {
+						const pages = internals.hoistedScriptIdToPagesMap.get(moduleId);
+						pages!.add(astroModuleId);
 					} else {
-						// For content collections save to hoistedScriptIdToContentMap instead
-						if (internals.hoistedScriptIdToContentMap.has(moduleId)) {
-							const contentModules = internals.hoistedScriptIdToContentMap.get(moduleId);
-							contentModules!.add(astroModuleId);
-						} else {
-							internals.hoistedScriptIdToContentMap.set(moduleId, new Set([astroModuleId]));
-							internals.hoistedScriptIdToHoistedMap.set(moduleId, hoistedSet);
-						}
+						internals.hoistedScriptIdToPagesMap.set(moduleId, new Set([astroModuleId]));
+						internals.hoistedScriptIdToHoistedMap.set(moduleId, hoistedSet);
 					}
 				}
 			},
diff --git a/packages/astro/src/core/build/plugins/plugin-content.ts b/packages/astro/src/core/build/plugins/plugin-content.ts
index 7210dd4f184b..b6843e52b351 100644
--- a/packages/astro/src/core/build/plugins/plugin-content.ts
+++ b/packages/astro/src/core/build/plugins/plugin-content.ts
@@ -171,6 +171,7 @@ function vitePluginContent(
 		outputOptions(outputOptions) {
 			const rootPath = normalizePath(fileURLToPath(opts.settings.config.root));
 			const srcPath = normalizePath(fileURLToPath(opts.settings.config.srcDir));
+			const entryCache = new Map<string, string>();
 			extendManualChunks(outputOptions, {
 				before(id, meta) {
 					if (id.startsWith(srcPath) && id.slice(srcPath.length).startsWith('content')) {
@@ -186,7 +187,11 @@ function vitePluginContent(
 							return resultId;
 						}
 						const [srcRelativePath, flag] = id.replace(rootPath, '/').split('?');
-						const collectionEntry = findEntryFromSrcRelativePath(lookupMap, srcRelativePath);
+						const collectionEntry = findEntryFromSrcRelativePath(
+							lookupMap,
+							srcRelativePath,
+							entryCache
+						);
 						if (collectionEntry) {
 							let suffix = '.mjs';
 							if (flag === PROPAGATED_ASSET_FLAG) {
@@ -273,8 +278,11 @@ function vitePluginContent(
 	};
 }
 
-const entryCache = new Map<string, string>();
-function findEntryFromSrcRelativePath(lookupMap: ContentLookupMap, srcRelativePath: string) {
+function findEntryFromSrcRelativePath(
+	lookupMap: ContentLookupMap,
+	srcRelativePath: string,
+	entryCache: Map<string, string>
+) {
 	let value = entryCache.get(srcRelativePath);
 	if (value) return value;
 	for (const collection of Object.values(lookupMap)) {
diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts
index e0dce339f769..c50951e0b081 100644
--- a/packages/astro/src/core/build/plugins/plugin-css.ts
+++ b/packages/astro/src/core/build/plugins/plugin-css.ts
@@ -5,7 +5,6 @@ import type { BuildInternals } from '../internal.js';
 import type { AstroBuildPlugin, BuildTarget } from '../plugin.js';
 import type { PageBuildData, StaticBuildOptions, StylesheetAsset } from '../types.js';
 
-import { RESOLVED_VIRTUAL_MODULE_ID as ASTRO_CONTENT_VIRTUAL_MODULE_ID } from '../../../content/consts.js';
 import { hasAssetPropagationFlag } from '../../../content/index.js';
 import type { AstroPluginCssMetadata } from '../../../vite-plugin-astro/index.js';
 import * as assetName from '../css-asset-name.js';
@@ -63,11 +62,8 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 
 	// stylesheet filenames are kept in here until "post", when they are rendered and ready to be inlined
 	const pagesToCss: Record<string, Record<string, { order: number; depth: number }>> = {};
-	const pagesToPropagatedCss: Record<string, Record<string, Set<string>>> = {};
-
-	const isContentCollectionCache =
-		options.buildOptions.settings.config.output === 'static' &&
-		options.buildOptions.settings.config.experimental.contentCollectionCache;
+	// Map of module Ids (usually something like `/Users/...blog.mdx?astroPropagatedAssets`) to its imported CSS
+	const moduleIdToPropagatedCss: Record<string, Set<string>> = {};
 
 	const cssBuildPlugin: VitePlugin = {
 		name: 'astro:rollup-plugin-build-css',
@@ -141,20 +137,9 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 					const parentModuleInfos = getParentExtendedModuleInfos(id, this, hasAssetPropagationFlag);
 					for (const { info: pageInfo, depth, order } of parentModuleInfos) {
 						if (hasAssetPropagationFlag(pageInfo.id)) {
-							const walkId = isContentCollectionCache ? ASTRO_CONTENT_VIRTUAL_MODULE_ID : id;
-							for (const parentInfo of getParentModuleInfos(walkId, this)) {
-								if (moduleIsTopLevelPage(parentInfo) === false) continue;
-
-								const pageViteID = parentInfo.id;
-								const pageData = getPageDataByViteID(internals, pageViteID);
-								if (pageData === undefined) continue;
-
-								for (const css of meta.importedCss) {
-									const propagatedStyles = (pagesToPropagatedCss[pageData.moduleSpecifier] ??= {});
-									const existingCss = (propagatedStyles[pageInfo.id] ??= new Set());
-
-									existingCss.add(css);
-								}
+							const propagatedCss = (moduleIdToPropagatedCss[pageInfo.id] ??= new Set());
+							for (const css of meta.importedCss) {
+								propagatedCss.add(css);
 							}
 						} else if (moduleIsTopLevelPage(pageInfo)) {
 							const pageViteID = pageInfo.id;
@@ -251,41 +236,30 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] {
 					? { type: 'inline', content: stylesheet.source }
 					: { type: 'external', src: stylesheet.fileName };
 
-				const pages = Array.from(eachPageData(internals));
 				let sheetAddedToPage = false;
 
-				pages.forEach((pageData) => {
+				// Apply `pagesToCss` information to the respective `pageData.styles`
+				for (const pageData of eachPageData(internals)) {
 					const orderingInfo = pagesToCss[pageData.moduleSpecifier]?.[stylesheet.fileName];
 					if (orderingInfo !== undefined) {
 						pageData.styles.push({ ...orderingInfo, sheet });
 						sheetAddedToPage = true;
-						return;
 					}
+				}
 
-					const propagatedPaths = pagesToPropagatedCss[pageData.moduleSpecifier];
-					if (propagatedPaths === undefined) return;
-					Object.entries(propagatedPaths).forEach(([pageInfoId, css]) => {
-						// return early if sheet does not need to be propagated
-						if (css.has(stylesheet.fileName) !== true) return;
-
-						// return early if the stylesheet needing propagation has already been included
-						if (pageData.styles.some((s) => s.sheet === sheet)) return;
-
-						let propagatedStyles: Set<StylesheetAsset>;
-						if (isContentCollectionCache) {
-							propagatedStyles =
-								internals.propagatedStylesMap.get(pageInfoId) ??
-								internals.propagatedStylesMap.set(pageInfoId, new Set()).get(pageInfoId)!;
-						} else {
-							propagatedStyles =
-								pageData.propagatedStyles.get(pageInfoId) ??
-								pageData.propagatedStyles.set(pageInfoId, new Set()).get(pageInfoId)!;
-						}
-
-						propagatedStyles.add(sheet);
-						sheetAddedToPage = true;
-					});
-				});
+				// Apply `moduleIdToPropagatedCss` information to `internals.propagatedStylesMap`.
+				// NOTE: It's pretty much a copy over to `internals.propagatedStylesMap` as it should be
+				// completely empty. The whole propagation handling could be better refactored in the future.
+				for (const moduleId in moduleIdToPropagatedCss) {
+					if (!moduleIdToPropagatedCss[moduleId].has(stylesheet.fileName)) continue;
+					let propagatedStyles = internals.propagatedStylesMap.get(moduleId);
+					if (!propagatedStyles) {
+						propagatedStyles = new Set();
+						internals.propagatedStylesMap.set(moduleId, propagatedStyles);
+					}
+					propagatedStyles.add(sheet);
+					sheetAddedToPage = true;
+				}
 
 				if (toBeInlined && sheetAddedToPage) {
 					// CSS is already added to all used pages, we can delete it from the bundle
diff --git a/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts b/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts
index 80bfa6a6e964..2ed3c7fa746d 100644
--- a/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts
+++ b/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts
@@ -1,6 +1,6 @@
 import type { BuildOptions, Plugin as VitePlugin } from 'vite';
 import type { AstroSettings } from '../../../@types/astro.js';
-import { isContentCollectionsCacheEnabled, viteID } from '../../util.js';
+import { viteID } from '../../util.js';
 import type { BuildInternals } from '../internal.js';
 import { getPageDataByViteID } from '../internal.js';
 import type { AstroBuildPlugin } from '../plugin.js';
@@ -72,42 +72,23 @@ export function vitePluginHoistedScripts(
 					output.dynamicImports.length === 0 &&
 					shouldInlineAsset(output.code, output.fileName, assetsInlineLimit);
 				let removeFromBundle = false;
-
 				const facadeId = output.facadeModuleId!;
-
-				// Pages
-				if (internals.hoistedScriptIdToPagesMap.has(facadeId)) {
-					const pages = internals.hoistedScriptIdToPagesMap.get(facadeId)!;
-					for (const pathname of pages) {
-						const vid = viteID(new URL('.' + pathname, settings.config.root));
-
-						const pageInfo = getPageDataByViteID(internals, vid);
-						if (pageInfo) {
-							if (canBeInlined) {
-								pageInfo.hoistedScript = {
-									type: 'inline',
-									value: output.code,
-								};
-								removeFromBundle = true;
-							} else {
-								pageInfo.hoistedScript = {
-									type: 'external',
-									value: id,
-								};
-							}
-						}
-					}
-				}
-				// Content collection entries
-				else {
-					const contentModules = internals.hoistedScriptIdToContentMap.get(facadeId)!;
-					for (const contentId of contentModules) {
-						if (isContentCollectionsCacheEnabled(settings.config)) {
-							const scripts =
-								internals.propagatedScriptsMap.get(contentId) ??
-								internals.propagatedScriptsMap.set(contentId, new Set()).get(contentId)!;
-
-							scripts.add(facadeId);
+				const pages = internals.hoistedScriptIdToPagesMap.get(facadeId)!;
+				for (const pathname of pages) {
+					const vid = viteID(new URL('.' + pathname, settings.config.root));
+					const pageInfo = getPageDataByViteID(internals, vid);
+					if (pageInfo) {
+						if (canBeInlined) {
+							pageInfo.hoistedScript = {
+								type: 'inline',
+								value: output.code,
+							};
+							removeFromBundle = true;
+						} else {
+							pageInfo.hoistedScript = {
+								type: 'external',
+								value: id,
+							};
 						}
 					}
 				}
diff --git a/packages/astro/src/core/build/types.ts b/packages/astro/src/core/build/types.ts
index 9b418f7bc56d..4b502c353c5a 100644
--- a/packages/astro/src/core/build/types.ts
+++ b/packages/astro/src/core/build/types.ts
@@ -26,8 +26,6 @@ export interface PageBuildData {
 	component: ComponentPath;
 	route: RouteData;
 	moduleSpecifier: string;
-	propagatedStyles: Map<string, Set<StylesheetAsset>>;
-	propagatedScripts: Map<string, Set<string>>;
 	hoistedScript: HoistedScriptAsset | undefined;
 	styles: Array<{ depth: number; order: number; sheet: StylesheetAsset }>;
 	hasSharedModules: boolean;
diff --git a/packages/astro/test/experimental-content-collections-css-inline-stylesheets.test.js b/packages/astro/test/experimental-content-collections-css-inline-stylesheets.test.js
index a4aede4966a5..d6c509de5b64 100644
--- a/packages/astro/test/experimental-content-collections-css-inline-stylesheets.test.js
+++ b/packages/astro/test/experimental-content-collections-css-inline-stylesheets.test.js
@@ -154,7 +154,10 @@ describe('Setting inlineStylesheets to always in static output', () => {
 			// to bust cache and prevent modules and their state
 			// from being reused
 			site: 'https://test.net/',
-			root: './fixtures/css-inline-stylesheets/',
+			// TODO: Uses -3 variant to bust ESM module cache when rendering the pages. Particularly in
+			// `node_modules/.astro/content/entry.mjs` and `import('./en/endeavour.mjs')`. Ideally this
+			// should be solved in core, but using this workaround for now.
+			root: './fixtures/css-inline-stylesheets-3/',
 			output: 'static',
 			build: {
 				inlineStylesheets: 'always',
diff --git a/packages/astro/test/experimental-content-collections-render.test.js b/packages/astro/test/experimental-content-collections-render.test.js
index 19349dc39764..9e1dcdb4614e 100644
--- a/packages/astro/test/experimental-content-collections-render.test.js
+++ b/packages/astro/test/experimental-content-collections-render.test.js
@@ -72,7 +72,7 @@ if (!isWindows) {
 
 				// Includes hoisted script
 				assert.notEqual(
-					[...allScripts].find((script) => $(script).attr('src')?.includes('hoisted')),
+					[...allScripts].find((script) => $(script).attr('src')?.includes('/_astro/WithScripts')),
 					undefined,
 					'hoisted script missing from head.'
 				);
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets-3/package.json b/packages/astro/test/fixtures/css-inline-stylesheets-3/package.json
new file mode 100644
index 000000000000..00e58c587604
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets-3/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/css-inline-stylesheets-3",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets-3/src/components/Button.astro b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/components/Button.astro
new file mode 100644
index 000000000000..3f25cbd3e3ae
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/components/Button.astro
@@ -0,0 +1,86 @@
+---
+const { class: className = '', style, href } = Astro.props;
+const { variant = 'primary' } = Astro.props;
+---
+
+<span class:list={[`link pixel variant-${variant}`, className]} >
+	<a {href}>
+		<span><slot /></span>
+	</a>
+</span>
+
+<style>
+	.link {
+		--border-radius: 8;
+		--duration: 200ms;
+		--delay: 30ms;
+		--background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
+		display: flex;
+		color: white;
+		font-size: 1.25rem;
+		width: max-content;
+	}
+	a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.67rem 1.25rem;
+		width: 100%;
+		height: 100%;
+		text-decoration: none;
+		color: inherit !important;
+		/* Indicates the button boundaries for forced colors users in older browsers */
+		outline: 1px solid transparent;
+	}
+
+	@media (forced-colors: active) {
+		a {
+			border: 1px solid LinkText;
+		}
+	}
+
+	a > :global(* + *) {
+		margin-inline-start: 0.25rem;
+	}
+
+	.variant-primary {
+		--variant: primary;
+		--background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
+	}
+	.variant-primary:hover,
+	.variant-primary:focus-within {
+		--link-color-stop-a: #6d39ff;
+		--link-color-stop-b: #af43ff;
+	}
+	.variant-primary:active {
+		--link-color-stop-a: #5f31e1;
+		--link-color-stop-b: #a740f3;
+	}
+
+	.variant-outline {
+		--variant: outline;
+		--background: none;
+		color: var(--background);
+	}
+	.variant-outline > a::before {
+		position: absolute;
+		top: 0;
+		right: calc(var(--pixel-size) * 1px);
+		bottom: calc(var(--pixel-size) * 1px);
+		left: calc(var(--pixel-size) * 1px);
+		content: '';
+		display: block;
+		transform-origin: bottom center;
+		background: linear-gradient(to top, var(--background), rgba(255, 255, 255, 0));
+		opacity: 0.3;
+		transform: scaleY(0);
+		transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	.variant-outline:hover > a::before,
+	.variant-outline:focus-within > a::before {
+		transform: scaleY(1);
+	}
+	.variant-outline:active > a::before {
+		transform: scaleY(1);
+	}
+</style>
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets-3/src/content/en/endeavour.md b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/content/en/endeavour.md
new file mode 100644
index 000000000000..240eeeae3993
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/content/en/endeavour.md
@@ -0,0 +1,15 @@
+---
+title: Endeavour
+description: 'Learn about the Endeavour NASA space shuttle.'
+publishedDate: 'Sun Jul 11 2021 00:00:00 GMT-0400 (Eastern Daylight Time)'
+layout: '../../layouts/Layout.astro'
+tags: [space, 90s]
+---
+
+**Source:** [Wikipedia](https://en.wikipedia.org/wiki/Space_Shuttle_Endeavour)
+
+Space Shuttle Endeavour (Orbiter Vehicle Designation: OV-105) is a retired orbiter from NASA's Space Shuttle program and the fifth and final operational Shuttle built. It embarked on its first mission, STS-49, in May 1992 and its 25th and final mission, STS-134, in May 2011. STS-134 was expected to be the final mission of the Space Shuttle program, but with the authorization of STS-135, Atlantis became the last shuttle to fly.
+
+The United States Congress approved the construction of Endeavour in 1987 to replace the Space Shuttle Challenger, which was destroyed in 1986.
+
+NASA chose, on cost grounds, to build much of Endeavour from spare parts rather than refitting the Space Shuttle Enterprise, and used structural spares built during the construction of Discovery and Atlantis in its assembly.
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets-3/src/imported.css b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/imported.css
new file mode 100644
index 000000000000..3959523ff16e
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/imported.css
@@ -0,0 +1,15 @@
+.bg-skyblue {
+    background: skyblue;
+}
+
+.bg-lightcoral {
+    background: lightcoral;
+}
+
+.red {
+    color: darkred;
+}
+
+.blue {
+    color: royalblue;
+}
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets-3/src/layouts/Layout.astro b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/layouts/Layout.astro
new file mode 100644
index 000000000000..0a26655189f5
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/layouts/Layout.astro
@@ -0,0 +1,35 @@
+---
+import Button from '../components/Button.astro';
+import '../imported.css';
+
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<Button>Button used in layout</Button>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	html {
+		font-family: system-ui, sans-serif;
+		background-color: #F6F6F6;
+	}
+	code {
+		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+			Bitstream Vera Sans Mono, Courier New, monospace;
+	}
+</style>
diff --git a/packages/astro/test/fixtures/css-inline-stylesheets-3/src/pages/index.astro b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/pages/index.astro
new file mode 100644
index 000000000000..2aecfb0f2eb7
--- /dev/null
+++ b/packages/astro/test/fixtures/css-inline-stylesheets-3/src/pages/index.astro
@@ -0,0 +1,17 @@
+---
+import { getEntryBySlug } from 'astro:content';
+import Button from '../components/Button.astro';
+
+const entry = await getEntryBySlug('en', 'endeavour');
+const { Content } = await entry.render();
+---
+<style>
+    #welcome::after {
+        content: '🚀'
+    }
+</style>
+<main>
+    <h1 id="welcome">Welcome to Astro</h1>
+    <Content/>
+    <Button>Button used directly in page</Button>
+</main>
diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js
index 5caab3d059b8..083348015c54 100644
--- a/packages/integrations/mdx/test/css-head-mdx.test.js
+++ b/packages/integrations/mdx/test/css-head-mdx.test.js
@@ -50,7 +50,7 @@ describe('Head injection w/ MDX', () => {
 			assert.equal(links.length, 1);
 
 			const scripts = document.querySelectorAll('head script[type=module]');
-			assert.equal(scripts.length, 2);
+			assert.equal(scripts.length, 1);
 		});
 
 		it('Using component using slots.render() API', async () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be362ddc2641..225e8e10ec66 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2612,6 +2612,12 @@ importers:
         specifier: workspace:*
         version: link:../../..
 
+  packages/astro/test/fixtures/css-inline-stylesheets-3:
+    dependencies:
+      astro:
+        specifier: workspace:*
+        version: link:../../..
+
   packages/astro/test/fixtures/css-no-code-split:
     dependencies:
       astro:

From ddd8e49d1a179bec82310fb471f822a1567a6610 Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Wed, 8 May 2024 17:25:27 +0800
Subject: [PATCH 4/7] MDX integration v3 (#10935)

* fix(mdx): convert remark-images-to-component plugin to a rehype plugin (#10697)

* Remove fs read for MDX transform (#10866)

* Tag MDX component for faster checks when rendering (#10864)

* Use unified plugin only for MDX transform (#10869)

* Only traverse children and handle mdxJsxTextElement when optimizing (#10885)

* Rename to `optimize.ignoreComponentNames` in MDX (#10884)

* Allow remark/rehype plugins added after mdx to work (#10877)

* Improve MDX optimize with sibling nodes (#10887)

* Improve types in rehype-optimize-static.ts

* Rename `ignoreComponentNames` to `ignoreElementNames`

I think this better reflects what it's actually doing

* Simplify plain MDX nodes in optimize option (#10934)

* Format code

* Minimize diff changes

* Update .changeset/slimy-cobras-end.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Armand Philippot <59021693+ArmandPhilippot@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .changeset/blue-geese-visit.md                |   5 +
 .changeset/chilly-items-help.md               |   5 +
 .changeset/fresh-masks-agree.md               |   5 +
 .changeset/friendly-plants-leave.md           |   5 +
 .changeset/large-glasses-jam.md               |   5 +
 .changeset/slimy-cobras-end.md                |   7 +
 .changeset/small-oranges-report.md            |   5 +
 .changeset/smart-rats-mate.md                 |   5 +
 .changeset/sweet-goats-own.md                 |   5 +
 .changeset/tame-avocados-relax.md             |   5 +
 .changeset/violet-snails-call.md              |   5 +
 .changeset/young-chicken-exercise.md          |   5 +
 packages/astro/package.json                   |   2 +
 packages/astro/src/jsx/babel.ts               |   3 +
 packages/astro/src/jsx/rehype.ts              | 320 ++++++++++++++++++
 packages/astro/src/jsx/server.ts              |  38 ++-
 packages/astro/src/jsx/transform-options.ts   |   3 +
 packages/astro/src/vite-plugin-mdx/index.ts   |   4 +-
 packages/astro/src/vite-plugin-mdx/tag.ts     |   2 +
 .../src/vite-plugin-mdx/transform-jsx.ts      |   3 +
 .../units/dev/collections-renderentry.test.js |  12 -
 packages/integrations/mdx/package.json        |   4 +-
 packages/integrations/mdx/src/README.md       |  39 ++-
 packages/integrations/mdx/src/index.ts        |  29 +-
 packages/integrations/mdx/src/plugins.ts      |  16 +-
 .../mdx/src/rehype-images-to-component.ts     | 166 +++++++++
 .../mdx/src/rehype-optimize-static.ts         | 251 ++++++++++++--
 .../mdx/src/remark-images-to-component.ts     | 156 ---------
 .../mdx/src/vite-plugin-mdx-postprocess.ts    |  75 ++--
 .../integrations/mdx/src/vite-plugin-mdx.ts   |  50 +--
 .../fixtures/mdx-optimize/astro.config.mjs    |   2 +-
 .../integrations/mdx/test/mdx-plugins.test.js |  24 ++
 .../test/units/rehype-optimize-static.test.js |  89 +++++
 pnpm-lock.yaml                                |  12 +
 34 files changed, 1081 insertions(+), 281 deletions(-)
 create mode 100644 .changeset/blue-geese-visit.md
 create mode 100644 .changeset/chilly-items-help.md
 create mode 100644 .changeset/fresh-masks-agree.md
 create mode 100644 .changeset/friendly-plants-leave.md
 create mode 100644 .changeset/large-glasses-jam.md
 create mode 100644 .changeset/slimy-cobras-end.md
 create mode 100644 .changeset/small-oranges-report.md
 create mode 100644 .changeset/smart-rats-mate.md
 create mode 100644 .changeset/sweet-goats-own.md
 create mode 100644 .changeset/tame-avocados-relax.md
 create mode 100644 .changeset/violet-snails-call.md
 create mode 100644 .changeset/young-chicken-exercise.md
 create mode 100644 packages/astro/src/jsx/rehype.ts
 create mode 100644 packages/integrations/mdx/src/rehype-images-to-component.ts
 delete mode 100644 packages/integrations/mdx/src/remark-images-to-component.ts
 create mode 100644 packages/integrations/mdx/test/units/rehype-optimize-static.test.js

diff --git a/.changeset/blue-geese-visit.md b/.changeset/blue-geese-visit.md
new file mode 100644
index 000000000000..408386d046c3
--- /dev/null
+++ b/.changeset/blue-geese-visit.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": patch
+---
+
+Simplifies plain MDX components as hast element nodes to further improve HTML string inlining for the `optimize` option
diff --git a/.changeset/chilly-items-help.md b/.changeset/chilly-items-help.md
new file mode 100644
index 000000000000..7e868474e32c
--- /dev/null
+++ b/.changeset/chilly-items-help.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Improves the error message when failed to render MDX components
diff --git a/.changeset/fresh-masks-agree.md b/.changeset/fresh-masks-agree.md
new file mode 100644
index 000000000000..08fc812c8841
--- /dev/null
+++ b/.changeset/fresh-masks-agree.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": major
+---
+
+Refactors the MDX transformation to rely only on the unified pipeline. Babel and esbuild transformations are removed, which should result in faster build times. The refactor requires using Astro v4.8.0 but no other changes are necessary.
diff --git a/.changeset/friendly-plants-leave.md b/.changeset/friendly-plants-leave.md
new file mode 100644
index 000000000000..c972fa42c4db
--- /dev/null
+++ b/.changeset/friendly-plants-leave.md
@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Exports `astro/jsx/rehype.js` with utilities to generate an Astro metadata object
diff --git a/.changeset/large-glasses-jam.md b/.changeset/large-glasses-jam.md
new file mode 100644
index 000000000000..885471d82fba
--- /dev/null
+++ b/.changeset/large-glasses-jam.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": patch
+---
+
+Allows Vite plugins to transform `.mdx` files before the MDX plugin transforms it
diff --git a/.changeset/slimy-cobras-end.md b/.changeset/slimy-cobras-end.md
new file mode 100644
index 000000000000..58f22ac07c12
--- /dev/null
+++ b/.changeset/slimy-cobras-end.md
@@ -0,0 +1,7 @@
+---
+"@astrojs/mdx": major
+---
+
+Allows integrations after the MDX integration to update `markdown.remarkPlugins` and `markdown.rehypePlugins`, and have the plugins work in MDX too.
+
+If your integration relies on Astro's previous behavior that prevents integrations from adding remark/rehype plugins for MDX, you will now need to configure `@astrojs/mdx` with `extendMarkdownConfig: false` and explicitly specify any `remarkPlugins` and `rehypePlugins` options instead.
diff --git a/.changeset/small-oranges-report.md b/.changeset/small-oranges-report.md
new file mode 100644
index 000000000000..8d0906e0530b
--- /dev/null
+++ b/.changeset/small-oranges-report.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": major
+---
+
+Renames the `optimize.customComponentNames` option to `optimize.ignoreElementNames` to better reflect its usecase. Its behaviour is not changed and should continue to work as before.
diff --git a/.changeset/smart-rats-mate.md b/.changeset/smart-rats-mate.md
new file mode 100644
index 000000000000..b779a86c8a5b
--- /dev/null
+++ b/.changeset/smart-rats-mate.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": patch
+---
+
+Updates the `optimize` option to group static sibling nodes as a `<Fragment />`. This reduces the number of AST nodes and simplifies runtime rendering of MDX pages.
diff --git a/.changeset/sweet-goats-own.md b/.changeset/sweet-goats-own.md
new file mode 100644
index 000000000000..6689246c33b3
--- /dev/null
+++ b/.changeset/sweet-goats-own.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": major
+---
+
+Replaces the internal `remark-images-to-component` plugin with `rehype-images-to-component` to let users use additional rehype plugins for images
diff --git a/.changeset/tame-avocados-relax.md b/.changeset/tame-avocados-relax.md
new file mode 100644
index 000000000000..9b6a36881c03
--- /dev/null
+++ b/.changeset/tame-avocados-relax.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": patch
+---
+
+Tags the MDX component export for quicker component checks while rendering
diff --git a/.changeset/violet-snails-call.md b/.changeset/violet-snails-call.md
new file mode 100644
index 000000000000..b7f06a7b9321
--- /dev/null
+++ b/.changeset/violet-snails-call.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": patch
+---
+
+Fixes `export const components` keys detection for the `optimize` option
diff --git a/.changeset/young-chicken-exercise.md b/.changeset/young-chicken-exercise.md
new file mode 100644
index 000000000000..04b7417bbe21
--- /dev/null
+++ b/.changeset/young-chicken-exercise.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/mdx": patch
+---
+
+Improves `optimize` handling for MDX components with attributes and inline MDX components
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 6c3bcfeddbf3..572d5a9863f8 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -209,6 +209,8 @@
     "astro-scripts": "workspace:*",
     "cheerio": "1.0.0-rc.12",
     "eol": "^0.9.1",
+    "mdast-util-mdx": "^3.0.0",
+    "mdast-util-mdx-jsx": "^3.1.2",
     "memfs": "^4.9.1",
     "node-mocks-http": "^1.14.1",
     "parse-srcset": "^1.0.2",
diff --git a/packages/astro/src/jsx/babel.ts b/packages/astro/src/jsx/babel.ts
index e8f9da87e2e1..d5fc0ccd30b0 100644
--- a/packages/astro/src/jsx/babel.ts
+++ b/packages/astro/src/jsx/babel.ts
@@ -134,6 +134,9 @@ function addClientOnlyMetadata(
 	}
 }
 
+/**
+ * @deprecated This plugin is no longer used. Remove in Astro 5.0
+ */
 export default function astroJSX(): PluginObj {
 	return {
 		visitor: {
diff --git a/packages/astro/src/jsx/rehype.ts b/packages/astro/src/jsx/rehype.ts
new file mode 100644
index 000000000000..40a8359cbe5c
--- /dev/null
+++ b/packages/astro/src/jsx/rehype.ts
@@ -0,0 +1,320 @@
+import type { RehypePlugin } from '@astrojs/markdown-remark';
+import type { RootContent } from 'hast';
+import type {
+	MdxJsxAttribute,
+	MdxJsxFlowElementHast,
+	MdxJsxTextElementHast,
+} from 'mdast-util-mdx-jsx';
+import { visit } from 'unist-util-visit';
+import type { VFile } from 'vfile';
+import { AstroError } from '../core/errors/errors.js';
+import { AstroErrorData } from '../core/errors/index.js';
+import { resolvePath } from '../core/util.js';
+import type { PluginMetadata } from '../vite-plugin-astro/types.js';
+
+// This import includes ambient types for hast to include mdx nodes
+import type {} from 'mdast-util-mdx';
+
+const ClientOnlyPlaceholder = 'astro-client-only';
+
+export const rehypeAnalyzeAstroMetadata: RehypePlugin = () => {
+	return (tree, file) => {
+		// Initial metadata for this MDX file, it will be mutated as we traverse the tree
+		const metadata: PluginMetadata['astro'] = {
+			clientOnlyComponents: [],
+			hydratedComponents: [],
+			scripts: [],
+			containsHead: false,
+			propagation: 'none',
+			pageOptions: {},
+		};
+
+		// Parse imports in this file. This is used to match components with their import source
+		const imports = parseImports(tree.children);
+
+		visit(tree, (node) => {
+			if (node.type !== 'mdxJsxFlowElement' && node.type !== 'mdxJsxTextElement') return;
+
+			const tagName = node.name;
+			if (!tagName || !isComponent(tagName) || !hasClientDirective(node)) return;
+
+			// From this point onwards, `node` is confirmed to be an island component
+
+			// Match this component with its import source
+			const matchedImport = findMatchingImport(tagName, imports);
+			if (!matchedImport) {
+				throw new AstroError({
+					...AstroErrorData.NoMatchingImport,
+					message: AstroErrorData.NoMatchingImport.message(node.name!),
+				});
+			}
+
+			// If this is an Astro component, that means the `client:` directive is misused as it doesn't
+			// work on Astro components as it's server-side only. Warn the user about this.
+			if (matchedImport.path.endsWith('.astro')) {
+				const clientAttribute = node.attributes.find(
+					(attr) => attr.type === 'mdxJsxAttribute' && attr.name.startsWith('client:')
+				) as MdxJsxAttribute | undefined;
+				if (clientAttribute) {
+					// eslint-disable-next-line
+					console.warn(
+						`You are attempting to render <${node.name!} ${
+							clientAttribute.name
+						} />, but ${node.name!} 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.`
+					);
+				}
+			}
+
+			const resolvedPath = resolvePath(matchedImport.path, file.path);
+
+			if (hasClientOnlyDirective(node)) {
+				// Add this component to the metadata
+				metadata.clientOnlyComponents.push({
+					exportName: matchedImport.name,
+					specifier: tagName,
+					resolvedPath,
+				});
+				// Mutate node with additional island attributes
+				addClientOnlyMetadata(node, matchedImport, resolvedPath);
+			} else {
+				// Add this component to the metadata
+				metadata.hydratedComponents.push({
+					exportName: '*',
+					specifier: tagName,
+					resolvedPath,
+				});
+				// Mutate node with additional island attributes
+				addClientMetadata(node, matchedImport, resolvedPath);
+			}
+		});
+
+		// Attach final metadata here, which can later be retrieved by `getAstroMetadata`
+		file.data.__astroMetadata = metadata;
+	};
+};
+
+export function getAstroMetadata(file: VFile) {
+	return file.data.__astroMetadata as PluginMetadata['astro'] | undefined;
+}
+
+type ImportSpecifier = { local: string; imported: string };
+
+/**
+ * ```
+ * import Foo from './Foo.jsx'
+ * import { Bar } from './Bar.jsx'
+ * import { Baz as Wiz } from './Bar.jsx'
+ * import * as Waz from './BaWazz.jsx'
+ *
+ * // => Map {
+ * //   "./Foo.jsx" => Set { { local: "Foo", imported: "default" } },
+ * //   "./Bar.jsx" => Set {
+ * //     { local: "Bar", imported: "Bar" }
+ * //     { local: "Wiz", imported: "Baz" },
+ * //   },
+ * //   "./Waz.jsx" => Set { { local: "Waz", imported: "*" } },
+ * // }
+ * ```
+ */
+function parseImports(children: RootContent[]) {
+	// Map of import source to its imported specifiers
+	const imports = new Map<string, Set<ImportSpecifier>>();
+
+	for (const child of children) {
+		if (child.type !== 'mdxjsEsm') continue;
+
+		const body = child.data?.estree?.body;
+		if (!body) continue;
+
+		for (const ast of body) {
+			if (ast.type !== 'ImportDeclaration') continue;
+
+			const source = ast.source.value as string;
+			const specs: ImportSpecifier[] = ast.specifiers.map((spec) => {
+				switch (spec.type) {
+					case 'ImportDefaultSpecifier':
+						return { local: spec.local.name, imported: 'default' };
+					case 'ImportNamespaceSpecifier':
+						return { local: spec.local.name, imported: '*' };
+					case 'ImportSpecifier':
+						return { local: spec.local.name, imported: spec.imported.name };
+					default:
+						throw new Error('Unknown import declaration specifier: ' + spec);
+				}
+			});
+
+			// Get specifiers set from source or initialize a new one
+			let specSet = imports.get(source);
+			if (!specSet) {
+				specSet = new Set();
+				imports.set(source, specSet);
+			}
+
+			for (const spec of specs) {
+				specSet.add(spec);
+			}
+		}
+	}
+
+	return imports;
+}
+
+function isComponent(tagName: string) {
+	return (
+		(tagName[0] && tagName[0].toLowerCase() !== tagName[0]) ||
+		tagName.includes('.') ||
+		/[^a-zA-Z]/.test(tagName[0])
+	);
+}
+
+function hasClientDirective(node: MdxJsxFlowElementHast | MdxJsxTextElementHast) {
+	return node.attributes.some(
+		(attr) => attr.type === 'mdxJsxAttribute' && attr.name.startsWith('client:')
+	);
+}
+
+function hasClientOnlyDirective(node: MdxJsxFlowElementHast | MdxJsxTextElementHast) {
+	return node.attributes.some(
+		(attr) => attr.type === 'mdxJsxAttribute' && attr.name === 'client:only'
+	);
+}
+
+type MatchedImport = { name: string; path: string };
+
+/**
+ * ```
+ * import Button from './Button.jsx'
+ * <Button />
+ * // => { name: "default", path: "./Button.jsx" }
+ *
+ * import { Button } from './Button.jsx'
+ * <Button />
+ * // => { name: "Button", path: "./Button.jsx" }
+ *
+ * import * as buttons from './Button.jsx'
+ * <buttons.Foo.Bar />
+ * // => { name: "Foo.Bar", path: "./Button.jsx" }
+ *
+ * import { buttons } from './Button.jsx'
+ * <buttons.Foo.Bar />
+ * // => { name: "buttons.Foo.Bar", path: "./Button.jsx" }
+ *
+ * import buttons from './Button.jsx'
+ * <buttons.Foo.Bar />
+ * // => { name: "default.Foo.Bar", path: "./Button.jsx" }
+ * ```
+ */
+function findMatchingImport(
+	tagName: string,
+	imports: Map<string, Set<ImportSpecifier>>
+): MatchedImport | undefined {
+	const tagSpecifier = tagName.split('.')[0];
+	for (const [source, specs] of imports) {
+		for (const { imported, local } of specs) {
+			if (local === tagSpecifier) {
+				// If tagName access properties, we need to make sure the returned `name`
+				// properly access the properties from `path`
+				if (tagSpecifier !== tagName) {
+					switch (imported) {
+						// Namespace import: "<buttons.Foo.Bar />" => name: "Foo.Bar"
+						case '*': {
+							const accessPath = tagName.slice(tagSpecifier.length + 1);
+							return { name: accessPath, path: source };
+						}
+						// Default import: "<buttons.Foo.Bar />" => name: "default.Foo.Bar"
+						case 'default': {
+							// "buttons.Foo.Bar" => "Foo.Bar"
+							const accessPath = tagName.slice(tagSpecifier.length + 1);
+							return { name: `default.${accessPath}`, path: source };
+						}
+						// Named import: "<buttons.Foo.Bar />" => name: "buttons.Foo.Bar"
+						default: {
+							return { name: tagName, path: source };
+						}
+					}
+				}
+
+				return { name: imported, path: source };
+			}
+		}
+	}
+}
+
+function addClientMetadata(
+	node: MdxJsxFlowElementHast | MdxJsxTextElementHast,
+	meta: MatchedImport,
+	resolvedPath: string
+) {
+	const attributeNames = node.attributes
+		.map((attr) => (attr.type === 'mdxJsxAttribute' ? attr.name : null))
+		.filter(Boolean);
+
+	if (!attributeNames.includes('client:component-path')) {
+		node.attributes.push({
+			type: 'mdxJsxAttribute',
+			name: 'client:component-path',
+			value: resolvedPath,
+		});
+	}
+	if (!attributeNames.includes('client:component-export')) {
+		if (meta.name === '*') {
+			meta.name = node.name!.split('.').slice(1).join('.')!;
+		}
+		node.attributes.push({
+			type: 'mdxJsxAttribute',
+			name: 'client:component-export',
+			value: meta.name,
+		});
+	}
+	if (!attributeNames.includes('client:component-hydration')) {
+		node.attributes.push({
+			type: 'mdxJsxAttribute',
+			name: 'client:component-hydration',
+			value: null,
+		});
+	}
+}
+
+function addClientOnlyMetadata(
+	node: MdxJsxFlowElementHast | MdxJsxTextElementHast,
+	meta: { path: string; name: string },
+	resolvedPath: string
+) {
+	const attributeNames = node.attributes
+		.map((attr) => (attr.type === 'mdxJsxAttribute' ? attr.name : null))
+		.filter(Boolean);
+
+	if (!attributeNames.includes('client:display-name')) {
+		node.attributes.push({
+			type: 'mdxJsxAttribute',
+			name: 'client:display-name',
+			value: node.name,
+		});
+	}
+	if (!attributeNames.includes('client:component-hydpathation')) {
+		node.attributes.push({
+			type: 'mdxJsxAttribute',
+			name: 'client:component-path',
+			value: resolvedPath,
+		});
+	}
+	if (!attributeNames.includes('client:component-export')) {
+		if (meta.name === '*') {
+			meta.name = node.name!.split('.').slice(1).join('.')!;
+		}
+		node.attributes.push({
+			type: 'mdxJsxAttribute',
+			name: 'client:component-export',
+			value: meta.name,
+		});
+	}
+	if (!attributeNames.includes('client:component-hydration')) {
+		node.attributes.push({
+			type: 'mdxJsxAttribute',
+			name: 'client:component-hydration',
+			value: null,
+		});
+	}
+
+	node.name = ClientOnlyPlaceholder;
+}
diff --git a/packages/astro/src/jsx/server.ts b/packages/astro/src/jsx/server.ts
index d445ee3a559b..2ed308c37e82 100644
--- a/packages/astro/src/jsx/server.ts
+++ b/packages/astro/src/jsx/server.ts
@@ -4,6 +4,8 @@ import { renderJSX } from '../runtime/server/jsx.js';
 
 const slotName = (str: string) => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
 
+// NOTE: In practice, MDX components are always tagged with `__astro_tag_component__`, so the right renderer
+// is used directly, and this check is not often used to return true.
 export async function check(
 	Component: any,
 	props: any,
@@ -19,18 +21,7 @@ export async function check(
 		const result = await Component({ ...props, ...slots, children });
 		return result[AstroJSX];
 	} catch (e) {
-		const error = e as Error;
-		// if the exception is from an mdx component
-		// throw an error
-		if (Component[Symbol.for('mdx-component')]) {
-			throw new AstroError({
-				message: error.message,
-				title: error.name,
-				hint: `This issue often occurs when your MDX component encounters runtime errors.`,
-				name: error.name,
-				stack: error.stack,
-			});
-		}
+		throwEnhancedErrorIfMdxComponent(e as Error, Component);
 	}
 	return false;
 }
@@ -48,8 +39,27 @@ export async function renderToStaticMarkup(
 	}
 
 	const { result } = this;
-	const html = await renderJSX(result, jsx(Component, { ...props, ...slots, children }));
-	return { html };
+	try {
+		const html = await renderJSX(result, jsx(Component, { ...props, ...slots, children }));
+		return { html };
+	} catch (e) {
+		throwEnhancedErrorIfMdxComponent(e as Error, Component);
+		throw e;
+	}
+}
+
+function throwEnhancedErrorIfMdxComponent(error: Error, Component: any) {
+	// if the exception is from an mdx component
+	// throw an error
+	if (Component[Symbol.for('mdx-component')]) {
+		throw new AstroError({
+			message: error.message,
+			title: error.name,
+			hint: `This issue often occurs when your MDX component encounters runtime errors.`,
+			name: error.name,
+			stack: error.stack,
+		});
+	}
 }
 
 export default {
diff --git a/packages/astro/src/jsx/transform-options.ts b/packages/astro/src/jsx/transform-options.ts
index 4b51d85b8b04..ca1d50a6a131 100644
--- a/packages/astro/src/jsx/transform-options.ts
+++ b/packages/astro/src/jsx/transform-options.ts
@@ -1,5 +1,8 @@
 import type { JSXTransformConfig } from '../@types/astro.js';
 
+/**
+ * @deprecated This function is no longer used. Remove in Astro 5.0
+ */
 export async function jsxTransformOptions(): Promise<JSXTransformConfig> {
 	// @ts-expect-error types not found
 	const plugin = await import('@babel/plugin-transform-react-jsx');
diff --git a/packages/astro/src/vite-plugin-mdx/index.ts b/packages/astro/src/vite-plugin-mdx/index.ts
index 7e86aed288f4..1c8e2ced6d81 100644
--- a/packages/astro/src/vite-plugin-mdx/index.ts
+++ b/packages/astro/src/vite-plugin-mdx/index.ts
@@ -9,7 +9,9 @@ const SPECIAL_QUERY_REGEX = new RegExp(
 	`[?&](?:worker|sharedworker|raw|url|${CONTENT_FLAG}|${PROPAGATED_ASSET_FLAG})\\b`
 );
 
-// TODO: Move this Vite plugin into `@astrojs/mdx` in Astro 5
+/**
+ * @deprecated This plugin is no longer used. Remove in Astro 5.0
+ */
 export default function mdxVitePlugin(): Plugin {
 	return {
 		name: 'astro:jsx',
diff --git a/packages/astro/src/vite-plugin-mdx/tag.ts b/packages/astro/src/vite-plugin-mdx/tag.ts
index 3b774a0a238d..0bf9722a56f2 100644
--- a/packages/astro/src/vite-plugin-mdx/tag.ts
+++ b/packages/astro/src/vite-plugin-mdx/tag.ts
@@ -11,6 +11,8 @@ const rendererName = astroJsxRenderer.name;
  *
  * This plugin crawls each export in the file and "tags" each export with a given `rendererName`.
  * This allows us to automatically match a component to a renderer and skip the usual `check()` calls.
+ *
+ * @deprecated This plugin is no longer used. Remove in Astro 5.0
  */
 export const tagExportsPlugin: PluginObj = {
 	visitor: {
diff --git a/packages/astro/src/vite-plugin-mdx/transform-jsx.ts b/packages/astro/src/vite-plugin-mdx/transform-jsx.ts
index 07eb87d0465e..e2e8e97bc6b1 100644
--- a/packages/astro/src/vite-plugin-mdx/transform-jsx.ts
+++ b/packages/astro/src/vite-plugin-mdx/transform-jsx.ts
@@ -5,6 +5,9 @@ import { jsxTransformOptions } from '../jsx/transform-options.js';
 import type { PluginMetadata } from '../vite-plugin-astro/types.js';
 import { tagExportsPlugin } from './tag.js';
 
+/**
+ * @deprecated This function is no longer used. Remove in Astro 5.0
+ */
 export async function transformJSX(
 	code: string,
 	id: string,
diff --git a/packages/astro/test/units/dev/collections-renderentry.test.js b/packages/astro/test/units/dev/collections-renderentry.test.js
index 4c3849577629..3fa872289404 100644
--- a/packages/astro/test/units/dev/collections-renderentry.test.js
+++ b/packages/astro/test/units/dev/collections-renderentry.test.js
@@ -84,18 +84,6 @@ _describe('Content Collections - render()', () => {
 	it('can be used in a layout component', async () => {
 		const fs = createFsWithFallback(
 			{
-				// Loading the content config with `astro:content` oddly
-				// causes this test to fail. Spoof a different src/content entry
-				// to ensure `existsSync` checks pass.
-				// TODO: revisit after addressing this issue
-				// https://github.com/withastro/astro/issues/6121
-				'/src/content/blog/promo/launch-week.mdx': `---
-title: Launch Week
-description: Astro is launching this week!
----
-# Launch Week
-- [x] Launch Astro
-- [ ] Celebrate`,
 				'/src/components/Layout.astro': `
 					---
 					import { getCollection } from 'astro:content';
diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json
index 8eb0bce21da1..5ea24d1609a7 100644
--- a/packages/integrations/mdx/package.json
+++ b/packages/integrations/mdx/package.json
@@ -50,10 +50,11 @@
     "vfile": "^6.0.1"
   },
   "peerDependencies": {
-    "astro": "^4.0.0"
+    "astro": "^4.8.0"
   },
   "devDependencies": {
     "@types/estree": "^1.0.5",
+    "@types/hast": "^3.0.3",
     "@types/mdast": "^4.0.3",
     "@types/yargs-parser": "^21.0.3",
     "astro": "workspace:*",
@@ -61,6 +62,7 @@
     "cheerio": "1.0.0-rc.12",
     "linkedom": "^0.16.11",
     "mdast-util-mdx": "^3.0.0",
+    "mdast-util-mdx-jsx": "^3.1.2",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
     "rehype-mathjax": "^6.0.0",
diff --git a/packages/integrations/mdx/src/README.md b/packages/integrations/mdx/src/README.md
index bbbc6075c8af..3fc991b77c91 100644
--- a/packages/integrations/mdx/src/README.md
+++ b/packages/integrations/mdx/src/README.md
@@ -30,12 +30,7 @@ After:
 
 ```jsx
 function _createMdxContent() {
-  return (
-    <>
-      <h1>My MDX Content</h1>
-      <pre set:html="<code class=...</code>"></pre>
-    </>
-  );
+  return <Fragment set:html="<h1>My MDX Content</h1>\n<code class=...</code>" />;
 }
 ```
 
@@ -49,15 +44,20 @@ The next section explains the algorithm, which you can follow along by pairing w
 
 ### How it works
 
-Two variables:
+The flow can be divided into a "scan phase" and a "mutation phase". The scan phase searches for nodes that can be optimized, and the mutation phase applies the optimization on the `hast` nodes.
+
+#### Scan phase
+
+Variables:
 
 - `allPossibleElements`: A set of subtree roots where we can add a new `set:html` property with its children as value.
 - `elementStack`: The stack of elements (that could be subtree roots) while traversing the `hast` (node ancestors).
+- `elementMetadatas`: A weak map to store the metadata used only by the mutation phase later.
 
 Flow:
 
 1. Walk the `hast` tree.
-2. For each `node` we enter, if the `node` is static (`type` is `element` or `mdxJsxFlowElement`), record in `allPossibleElements` and push to `elementStack`.
+2. For each `node` we enter, if the `node` is static (`type` is `element` or starts with `mdx`), record in `allPossibleElements` and push to `elementStack`. We also record additional metadata in `elementMetadatas` for the mutation phase later.
    - Q: Why do we record `mdxJsxFlowElement`, it's MDX? <br>
      A: Because we're looking for nodes whose children are static. The node itself doesn't need to be static.
    - Q: Are we sure this is the subtree root node in `allPossibleElements`? <br>
@@ -71,8 +71,25 @@ Flow:
    - Q: Why before step 2's `node` enter handling? <br>
      A: If we find a non-static `node`, the `node` should still be considered in `allPossibleElements` as its children could be static.
 5. Walk done. This leaves us with `allPossibleElements` containing only subtree roots that can be optimized.
-6. Add the `set:html` property to the `hast` node, and remove its children.
-7. 🎉 The rest of the MDX pipeline will do its thing and generate the desired JSX like above.
+6. Proceed to the mutation phase.
+
+#### Mutation phase
+
+Inputs:
+
+- `allPossibleElements` from the scan phase.
+- `elementMetadatas` from the scan phase.
+
+Flow:
+
+1. Before we mutate the `hast` tree, each element in `allPossibleElements` may have siblings that can be optimized together. Sibling elements are grouped with the `findElementGroups()` function, which returns an array of element groups (new variable `elementGroups`) and mutates `allPossibleElements` to remove elements that are already part of a group.
+
+   - Q: How does `findElementGroups()` work? <br>
+     A: For each elements in `allPossibleElements` that are non-static, we're able to take the element metadata from `elementMetadatas` and guess the next sibling node. If the next sibling node is static and is an element in `allPossibleElements`, we group them together for optimization. It continues to guess until it hits a non-static node or an element not in `allPossibleElements`, which it'll finalize the group as part of the returned result.
+
+2. For each elements in `allPossibleElements`, we serailize them as HTML and add it to the `set:html` property of the `hast` node, and remove its children.
+3. For each element group in `elementGroups`, we serialize the group children as HTML and add it to a new `<Fragment set:html="..." />` node, and replace the group children with the new `<Fragment />` node.
+4. 🎉 The rest of the MDX pipeline will do its thing and generate the desired JSX like above.
 
 ### Extra
 
@@ -82,7 +99,7 @@ Astro's MDX implementation supports specifying `export const components` in the
 
 #### Further optimizations
 
-In [How it works](#how-it-works) step 4,
+In [Scan phase](#scan-phase) step 4,
 
 > we remove all the elements in `elementStack` from `allPossibleElements`
 
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts
index fc1d92da48ca..3aaed8787585 100644
--- a/packages/integrations/mdx/src/index.ts
+++ b/packages/integrations/mdx/src/index.ts
@@ -29,6 +29,10 @@ type SetupHookParams = HookParameters<'astro:config:setup'> & {
 };
 
 export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroIntegration {
+	// @ts-expect-error Temporarily assign an empty object here, which will be re-assigned by the
+	// `astro:config:done` hook later. This is so that `vitePluginMdx` can get hold of a reference earlier.
+	let mdxOptions: MdxOptions = {};
+
 	return {
 		name: '@astrojs/mdx',
 		hooks: {
@@ -58,21 +62,30 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 					handlePropagation: true,
 				});
 
+				updateConfig({
+					vite: {
+						plugins: [vitePluginMdx(mdxOptions), vitePluginMdxPostprocess(config)],
+					},
+				});
+			},
+			'astro:config:done': ({ config }) => {
+				// We resolve the final MDX options here so that other integrations have a chance to modify
+				// `config.markdown` before we access it
 				const extendMarkdownConfig =
 					partialMdxOptions.extendMarkdownConfig ?? defaultMdxOptions.extendMarkdownConfig;
 
-				const mdxOptions = applyDefaultOptions({
+				const resolvedMdxOptions = applyDefaultOptions({
 					options: partialMdxOptions,
 					defaults: markdownConfigToMdxOptions(
 						extendMarkdownConfig ? config.markdown : markdownConfigDefaults
 					),
 				});
 
-				updateConfig({
-					vite: {
-						plugins: [vitePluginMdx(config, mdxOptions), vitePluginMdxPostprocess(config)],
-					},
-				});
+				// Mutate `mdxOptions` so that `vitePluginMdx` can reference the actual options
+				Object.assign(mdxOptions, resolvedMdxOptions);
+				// @ts-expect-error After we assign, we don't need to reference `mdxOptions` in this context anymore.
+				// Re-assign it so that the garbage can be collected later.
+				mdxOptions = {};
 			},
 		},
 	};
@@ -81,7 +94,8 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 const defaultMdxOptions = {
 	extendMarkdownConfig: true,
 	recmaPlugins: [],
-};
+	optimize: false,
+} satisfies Partial<MdxOptions>;
 
 function markdownConfigToMdxOptions(markdownConfig: typeof markdownConfigDefaults): MdxOptions {
 	return {
@@ -90,7 +104,6 @@ function markdownConfigToMdxOptions(markdownConfig: typeof markdownConfigDefault
 		remarkPlugins: ignoreStringPlugins(markdownConfig.remarkPlugins),
 		rehypePlugins: ignoreStringPlugins(markdownConfig.rehypePlugins),
 		remarkRehype: (markdownConfig.remarkRehype as any) ?? {},
-		optimize: false,
 	};
 }
 
diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts
index 99d0c70b2756..3978e5325435 100644
--- a/packages/integrations/mdx/src/plugins.ts
+++ b/packages/integrations/mdx/src/plugins.ts
@@ -5,6 +5,7 @@ import {
 	remarkCollectImages,
 } from '@astrojs/markdown-remark';
 import { createProcessor, nodeTypes } from '@mdx-js/mdx';
+import { rehypeAnalyzeAstroMetadata } from 'astro/jsx/rehype.js';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import remarkSmartypants from 'remark-smartypants';
@@ -13,9 +14,9 @@ import type { PluggableList } from 'unified';
 import type { MdxOptions } from './index.js';
 import { rehypeApplyFrontmatterExport } from './rehype-apply-frontmatter-export.js';
 import { rehypeInjectHeadingsExport } from './rehype-collect-headings.js';
+import { rehypeImageToComponent } from './rehype-images-to-component.js';
 import rehypeMetaString from './rehype-meta-string.js';
 import { rehypeOptimizeStatic } from './rehype-optimize-static.js';
-import { remarkImageToComponent } from './remark-images-to-component.js';
 
 // Skip nonessential plugins during performance benchmark runs
 const isPerformanceBenchmark = Boolean(process.env.ASTRO_PERFORMANCE_BENCHMARK);
@@ -30,7 +31,6 @@ export function createMdxProcessor(mdxOptions: MdxOptions, extraOptions: MdxProc
 		rehypePlugins: getRehypePlugins(mdxOptions),
 		recmaPlugins: mdxOptions.recmaPlugins,
 		remarkRehypeOptions: mdxOptions.remarkRehype,
-		jsx: true,
 		jsxImportSource: 'astro',
 		// Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
 		format: 'mdx',
@@ -52,7 +52,7 @@ function getRemarkPlugins(mdxOptions: MdxOptions): PluggableList {
 		}
 	}
 
-	remarkPlugins.push(...mdxOptions.remarkPlugins, remarkCollectImages, remarkImageToComponent);
+	remarkPlugins.push(...mdxOptions.remarkPlugins, remarkCollectImages);
 
 	return remarkPlugins;
 }
@@ -74,7 +74,7 @@ function getRehypePlugins(mdxOptions: MdxOptions): PluggableList {
 		}
 	}
 
-	rehypePlugins.push(...mdxOptions.rehypePlugins);
+	rehypePlugins.push(...mdxOptions.rehypePlugins, rehypeImageToComponent);
 
 	if (!isPerformanceBenchmark) {
 		// getHeadings() is guaranteed by TS, so this must be included.
@@ -82,8 +82,12 @@ function getRehypePlugins(mdxOptions: MdxOptions): PluggableList {
 		rehypePlugins.push(rehypeHeadingIds, rehypeInjectHeadingsExport);
 	}
 
-	// computed from `astro.data.frontmatter` in VFile data
-	rehypePlugins.push(rehypeApplyFrontmatterExport);
+	rehypePlugins.push(
+		// Render info from `vfile.data.astro.data.frontmatter` as JS
+		rehypeApplyFrontmatterExport,
+		// Analyze MDX nodes and attach to `vfile.data.__astroMetadata`
+		rehypeAnalyzeAstroMetadata
+	);
 
 	if (mdxOptions.optimize) {
 		// Convert user `optimize` option to compatible `rehypeOptimizeStatic` option
diff --git a/packages/integrations/mdx/src/rehype-images-to-component.ts b/packages/integrations/mdx/src/rehype-images-to-component.ts
new file mode 100644
index 000000000000..6c797fda235f
--- /dev/null
+++ b/packages/integrations/mdx/src/rehype-images-to-component.ts
@@ -0,0 +1,166 @@
+import type { MarkdownVFile } from '@astrojs/markdown-remark';
+import type { Properties, Root } from 'hast';
+import type { MdxJsxAttribute, MdxjsEsm } from 'mdast-util-mdx';
+import type { MdxJsxFlowElementHast } from 'mdast-util-mdx-jsx';
+import { visit } from 'unist-util-visit';
+import { jsToTreeNode } from './utils.js';
+
+export const ASTRO_IMAGE_ELEMENT = 'astro-image';
+export const ASTRO_IMAGE_IMPORT = '__AstroImage__';
+export const USES_ASTRO_IMAGE_FLAG = '__usesAstroImage';
+
+function createArrayAttribute(name: string, values: (string | number)[]): MdxJsxAttribute {
+	return {
+		type: 'mdxJsxAttribute',
+		name: name,
+		value: {
+			type: 'mdxJsxAttributeValueExpression',
+			value: name,
+			data: {
+				estree: {
+					type: 'Program',
+					body: [
+						{
+							type: 'ExpressionStatement',
+							expression: {
+								type: 'ArrayExpression',
+								elements: values.map((value) => ({
+									type: 'Literal',
+									value: value,
+									raw: String(value),
+								})),
+							},
+						},
+					],
+					sourceType: 'module',
+					comments: [],
+				},
+			},
+		},
+	};
+}
+
+/**
+ * Convert the <img /> element properties (except `src`) to MDX JSX attributes.
+ *
+ * @param {Properties} props - The element properties
+ * @returns {MdxJsxAttribute[]} The MDX attributes
+ */
+function getImageComponentAttributes(props: Properties): MdxJsxAttribute[] {
+	const attrs: MdxJsxAttribute[] = [];
+
+	for (const [prop, value] of Object.entries(props)) {
+		if (prop === 'src') continue;
+
+		/*
+		 * <Image /> component expects an array for those attributes but the
+		 * received properties are sanitized as strings. So we need to convert them
+		 * back to an array.
+		 */
+		if (prop === 'widths' || prop === 'densities') {
+			attrs.push(createArrayAttribute(prop, String(value).split(' ')));
+		} else {
+			attrs.push({
+				name: prop,
+				type: 'mdxJsxAttribute',
+				value: String(value),
+			});
+		}
+	}
+
+	return attrs;
+}
+
+export function rehypeImageToComponent() {
+	return function (tree: Root, file: MarkdownVFile) {
+		if (!file.data.imagePaths) return;
+
+		const importsStatements: MdxjsEsm[] = [];
+		const importedImages = new Map<string, string>();
+
+		visit(tree, 'element', (node, index, parent) => {
+			if (!file.data.imagePaths || node.tagName !== 'img' || !node.properties.src) return;
+
+			const src = decodeURI(String(node.properties.src));
+
+			if (!file.data.imagePaths.has(src)) return;
+
+			let importName = importedImages.get(src);
+
+			if (!importName) {
+				importName = `__${importedImages.size}_${src.replace(/\W/g, '_')}__`;
+
+				importsStatements.push({
+					type: 'mdxjsEsm',
+					value: '',
+					data: {
+						estree: {
+							type: 'Program',
+							sourceType: 'module',
+							body: [
+								{
+									type: 'ImportDeclaration',
+									source: {
+										type: 'Literal',
+										value: src,
+										raw: JSON.stringify(src),
+									},
+									specifiers: [
+										{
+											type: 'ImportDefaultSpecifier',
+											local: { type: 'Identifier', name: importName },
+										},
+									],
+								},
+							],
+						},
+					},
+				});
+				importedImages.set(src, importName);
+			}
+
+			// Build a component that's equivalent to <Image src={importName} {...attributes} />
+			const componentElement: MdxJsxFlowElementHast = {
+				name: ASTRO_IMAGE_ELEMENT,
+				type: 'mdxJsxFlowElement',
+				attributes: [
+					...getImageComponentAttributes(node.properties),
+					{
+						name: 'src',
+						type: 'mdxJsxAttribute',
+						value: {
+							type: 'mdxJsxAttributeValueExpression',
+							value: importName,
+							data: {
+								estree: {
+									type: 'Program',
+									sourceType: 'module',
+									comments: [],
+									body: [
+										{
+											type: 'ExpressionStatement',
+											expression: { type: 'Identifier', name: importName },
+										},
+									],
+								},
+							},
+						},
+					},
+				],
+				children: [],
+			};
+
+			parent!.children.splice(index!, 1, componentElement);
+		});
+
+		// Add all the import statements to the top of the file for the images
+		tree.children.unshift(...importsStatements);
+
+		tree.children.unshift(
+			jsToTreeNode(`import { Image as ${ASTRO_IMAGE_IMPORT} } from "astro:assets";`)
+		);
+		// Export `__usesAstroImage` to pick up `astro:assets` usage in the module graph.
+		// @see the '@astrojs/mdx-postprocess' plugin
+		tree.children.push(jsToTreeNode(`export const ${USES_ASTRO_IMAGE_FLAG} = true`));
+	};
+}
diff --git a/packages/integrations/mdx/src/rehype-optimize-static.ts b/packages/integrations/mdx/src/rehype-optimize-static.ts
index 573af317e99c..ebedb753e1cf 100644
--- a/packages/integrations/mdx/src/rehype-optimize-static.ts
+++ b/packages/integrations/mdx/src/rehype-optimize-static.ts
@@ -1,11 +1,26 @@
-import { visit } from 'estree-util-visit';
+import type { RehypePlugin } from '@astrojs/markdown-remark';
+import { SKIP, visit } from 'estree-util-visit';
+import type { Element, RootContent, RootContentMap } from 'hast';
 import { toHtml } from 'hast-util-to-html';
+import type { MdxJsxFlowElementHast, MdxJsxTextElementHast } from 'mdast-util-mdx-jsx';
 
-// accessing untyped hast and mdx types
-type Node = any;
+// This import includes ambient types for hast to include mdx nodes
+import type {} from 'mdast-util-mdx';
+
+// Alias as the main hast node
+type Node = RootContent;
+// Nodes that have the `children` property
+type ParentNode = Element | MdxJsxFlowElementHast | MdxJsxTextElementHast;
+// Nodes that can have its children optimized as a single HTML string
+type OptimizableNode = Element | MdxJsxFlowElementHast | MdxJsxTextElementHast;
 
 export interface OptimizeOptions {
-	customComponentNames?: string[];
+	ignoreElementNames?: string[];
+}
+
+interface ElementMetadata {
+	parent: ParentNode;
+	index: number;
 }
 
 const exportConstComponentsRe = /export\s+const\s+components\s*=/;
@@ -17,44 +32,57 @@ const exportConstComponentsRe = /export\s+const\s+components\s*=/;
  * This optimization reduces the JS output as more content are represented as a
  * string instead, which also reduces the AST size that Rollup holds in memory.
  */
-export function rehypeOptimizeStatic(options?: OptimizeOptions) {
-	return (tree: any) => {
+export const rehypeOptimizeStatic: RehypePlugin<[OptimizeOptions?]> = (options) => {
+	return (tree) => {
 		// A set of non-static components to avoid collapsing when walking the tree
 		// as they need to be preserved as JSX to be rendered dynamically.
-		const customComponentNames = new Set<string>(options?.customComponentNames);
+		const ignoreElementNames = new Set<string>(options?.ignoreElementNames);
 
 		// Find `export const components = { ... }` and get it's object's keys to be
-		// populated into `customComponentNames`. This configuration is used to render
+		// populated into `ignoreElementNames`. This configuration is used to render
 		// some HTML elements as custom components, and we also want to avoid collapsing them.
 		for (const child of tree.children) {
 			if (child.type === 'mdxjsEsm' && exportConstComponentsRe.test(child.value)) {
-				// Try to loosely get the object property nodes
-				const objectPropertyNodes = child.data.estree.body[0]?.declarations?.[0]?.init?.properties;
-				if (objectPropertyNodes) {
-					for (const objectPropertyNode of objectPropertyNodes) {
-						const componentName = objectPropertyNode.key?.name ?? objectPropertyNode.key?.value;
-						if (componentName) {
-							customComponentNames.add(componentName);
-						}
+				const keys = getExportConstComponentObjectKeys(child);
+				if (keys) {
+					for (const key of keys) {
+						ignoreElementNames.add(key);
 					}
 				}
+				break;
 			}
 		}
 
 		// All possible elements that could be the root of a subtree
-		const allPossibleElements = new Set<Node>();
+		const allPossibleElements = new Set<OptimizableNode>();
 		// The current collapsible element stack while traversing the tree
 		const elementStack: Node[] = [];
+		// Metadata used by `findElementGroups` later
+		const elementMetadatas = new WeakMap<OptimizableNode, ElementMetadata>();
+
+		/**
+		 * A non-static node causes all its parents to be non-optimizable
+		 */
+		const isNodeNonStatic = (node: Node) => {
+			// @ts-expect-error Access `.tagName` naively for perf
+			return node.type.startsWith('mdx') || ignoreElementNames.has(node.tagName);
+		};
+
+		visit(tree as any, {
+			// @ts-expect-error Force coerce node as hast node
+			enter(node: Node, key, index, parents: ParentNode[]) {
+				// `estree-util-visit` may traverse in MDX `attributes`, we don't want that. Only continue
+				// if it's traversing the root, or the `children` key.
+				if (key != null && key !== 'children') return SKIP;
+
+				// Mutate `node` as a normal hast element node if it's a plain MDX node, e.g. `<kbd>something</kbd>`
+				simplifyPlainMdxComponentNode(node, ignoreElementNames);
 
-		visit(tree, {
-			enter(node) {
-				// @ts-expect-error read tagName naively
-				const isCustomComponent = node.tagName && customComponentNames.has(node.tagName);
-				// For nodes that can't be optimized, eliminate all elements in the
-				// `elementStack` from the `allPossibleElements` set.
-				if (node.type.startsWith('mdx') || isCustomComponent) {
+				// For nodes that are not static, eliminate all elements in the `elementStack` from the
+				// `allPossibleElements` set.
+				if (isNodeNonStatic(node)) {
 					for (const el of elementStack) {
-						allPossibleElements.delete(el);
+						allPossibleElements.delete(el as OptimizableNode);
 					}
 					// Micro-optimization: While this destroys the meaning of an element
 					// stack for this node, things will still work but we won't repeatedly
@@ -64,17 +92,25 @@ export function rehypeOptimizeStatic(options?: OptimizeOptions) {
 				}
 				// For possible subtree root nodes, record them in `elementStack` and
 				// `allPossibleElements` to be used in the "leave" hook below.
-				// @ts-expect-error MDX types for `.type` is not enhanced because MDX isn't used directly
-				if (node.type === 'element' || node.type === 'mdxJsxFlowElement') {
+				if (node.type === 'element' || isMdxComponentNode(node)) {
 					elementStack.push(node);
 					allPossibleElements.add(node);
+
+					if (index != null && node.type === 'element') {
+						// Record metadata for element node to be used for grouping analysis later
+						elementMetadatas.set(node, { parent: parents[parents.length - 1], index });
+					}
 				}
 			},
-			leave(node, _, __, parents) {
+			// @ts-expect-error Force coerce node as hast node
+			leave(node: Node, key, _, parents: ParentNode[]) {
+				// `estree-util-visit` may traverse in MDX `attributes`, we don't want that. Only continue
+				// if it's traversing the root, or the `children` key.
+				if (key != null && key !== 'children') return SKIP;
+
 				// Do the reverse of the if condition above, popping the `elementStack`,
 				// and consolidating `allPossibleElements` as a subtree root.
-				// @ts-expect-error MDX types for `.type` is not enhanced because MDX isn't used directly
-				if (node.type === 'element' || node.type === 'mdxJsxFlowElement') {
+				if (node.type === 'element' || isMdxComponentNode(node)) {
 					elementStack.pop();
 					// Many possible elements could be part of a subtree, in order to find
 					// the root, we check the parent of the element we're popping. If the
@@ -89,10 +125,18 @@ export function rehypeOptimizeStatic(options?: OptimizeOptions) {
 			},
 		});
 
+		// Within `allPossibleElements`, element nodes are often siblings and instead of setting `set:html`
+		// on each of the element node, we can create a `<Fragment set:html="...">` element that includes
+		// all element nodes instead, simplifying the output.
+		const elementGroups = findElementGroups(allPossibleElements, elementMetadatas, isNodeNonStatic);
+
 		// For all possible subtree roots, collapse them into `set:html` and
 		// strip of their children
 		for (const el of allPossibleElements) {
-			if (el.type === 'mdxJsxFlowElement') {
+			// Avoid adding empty `set:html` attributes if there's no children
+			if (el.children.length === 0) continue;
+
+			if (isMdxComponentNode(el)) {
 				el.attributes.push({
 					type: 'mdxJsxAttribute',
 					name: 'set:html',
@@ -103,5 +147,150 @@ export function rehypeOptimizeStatic(options?: OptimizeOptions) {
 			}
 			el.children = [];
 		}
+
+		// For each element group, we create a new `<Fragment />` MDX node with `set:html` of the children
+		// serialized as HTML. We insert this new fragment, replacing all the group children nodes.
+		// We iterate in reverse to avoid changing the index of groups of the same parent.
+		for (let i = elementGroups.length - 1; i >= 0; i--) {
+			const group = elementGroups[i];
+			const fragmentNode: MdxJsxFlowElementHast = {
+				type: 'mdxJsxFlowElement',
+				name: 'Fragment',
+				attributes: [
+					{
+						type: 'mdxJsxAttribute',
+						name: 'set:html',
+						value: toHtml(group.children),
+					},
+				],
+				children: [],
+			};
+			group.parent.children.splice(group.startIndex, group.children.length, fragmentNode);
+		}
 	};
+};
+
+interface ElementGroup {
+	parent: ParentNode;
+	startIndex: number;
+	children: Node[];
+}
+
+/**
+ * Iterate through `allPossibleElements` and find elements that are siblings, and return them. `allPossibleElements`
+ * will be mutated to exclude these grouped elements.
+ */
+function findElementGroups(
+	allPossibleElements: Set<OptimizableNode>,
+	elementMetadatas: WeakMap<OptimizableNode, ElementMetadata>,
+	isNodeNonStatic: (node: Node) => boolean
+): ElementGroup[] {
+	const elementGroups: ElementGroup[] = [];
+
+	for (const el of allPossibleElements) {
+		// Non-static nodes can't be grouped. It can only optimize its static children.
+		if (isNodeNonStatic(el)) continue;
+
+		// Get the metadata for the element node, this should always exist
+		const metadata = elementMetadatas.get(el);
+		if (!metadata) {
+			throw new Error(
+				'Internal MDX error: rehype-optimize-static should have metadata for element node'
+			);
+		}
+
+		// For this element, iterate through the next siblings and add them to this array
+		// if they are text nodes or elements that are in `allPossibleElements` (optimizable).
+		// If one of the next siblings don't match the criteria, break the loop as others are no longer siblings.
+		const groupableElements: Node[] = [el];
+		for (let i = metadata.index + 1; i < metadata.parent.children.length; i++) {
+			const node = metadata.parent.children[i];
+
+			// If the node is non-static, we can't group it with the current element
+			if (isNodeNonStatic(node)) break;
+
+			if (node.type === 'element') {
+				// This node is now (presumably) part of a group, remove it from `allPossibleElements`
+				const existed = allPossibleElements.delete(node);
+				// If this node didn't exist in `allPossibleElements`, it's likely that one of its children
+				// are non-static, hence this node can also not be grouped. So we break out here.
+				if (!existed) break;
+			}
+
+			groupableElements.push(node);
+		}
+
+		// If group elements are more than one, add them to the `elementGroups`.
+		// Grouping is most effective if there's multiple elements in it.
+		if (groupableElements.length > 1) {
+			elementGroups.push({
+				parent: metadata.parent,
+				startIndex: metadata.index,
+				children: groupableElements,
+			});
+			// The `el` is also now part of a group, remove it from `allPossibleElements`
+			allPossibleElements.delete(el);
+		}
+	}
+
+	return elementGroups;
+}
+
+function isMdxComponentNode(node: Node): node is MdxJsxFlowElementHast | MdxJsxTextElementHast {
+	return node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement';
+}
+
+/**
+ * Get the object keys from `export const components`
+ *
+ * @example
+ * `export const components = { foo, bar: Baz }`, returns `['foo', 'bar']`
+ */
+function getExportConstComponentObjectKeys(node: RootContentMap['mdxjsEsm']) {
+	const exportNamedDeclaration = node.data?.estree?.body[0];
+	if (exportNamedDeclaration?.type !== 'ExportNamedDeclaration') return;
+
+	const variableDeclaration = exportNamedDeclaration.declaration;
+	if (variableDeclaration?.type !== 'VariableDeclaration') return;
+
+	const variableInit = variableDeclaration.declarations[0]?.init;
+	if (variableInit?.type !== 'ObjectExpression') return;
+
+	const keys: string[] = [];
+	for (const propertyNode of variableInit.properties) {
+		if (propertyNode.type === 'Property' && propertyNode.key.type === 'Identifier') {
+			keys.push(propertyNode.key.name);
+		}
+	}
+	return keys;
+}
+
+/**
+ * Some MDX nodes are simply `<kbd>something</kbd>` which isn't needed to be completely treated
+ * as an MDX node. This function tries to mutate this node as a simple hast element node if so.
+ */
+function simplifyPlainMdxComponentNode(node: Node, ignoreElementNames: Set<string>) {
+	if (
+		!isMdxComponentNode(node) ||
+		// Attributes could be dynamic, so bail if so.
+		node.attributes.length > 0 ||
+		// Fragments are also dynamic
+		!node.name ||
+		// Ignore if the node name is in the ignore list
+		ignoreElementNames.has(node.name) ||
+		// If the node name has uppercase characters, it's likely an actual MDX component
+		node.name.toLowerCase() !== node.name
+	) {
+		return;
+	}
+
+	// Mutate as hast element node
+	const newNode = node as unknown as Element;
+	newNode.type = 'element';
+	newNode.tagName = node.name;
+	newNode.properties = {};
+
+	// @ts-expect-error Delete mdx-specific properties
+	node.attributes = undefined;
+	node.data = undefined;
 }
diff --git a/packages/integrations/mdx/src/remark-images-to-component.ts b/packages/integrations/mdx/src/remark-images-to-component.ts
deleted file mode 100644
index 46d04d443341..000000000000
--- a/packages/integrations/mdx/src/remark-images-to-component.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import type { MarkdownVFile } from '@astrojs/markdown-remark';
-import type { Image, Parent } from 'mdast';
-import type { MdxJsxAttribute, MdxJsxFlowElement, MdxjsEsm } from 'mdast-util-mdx';
-import { visit } from 'unist-util-visit';
-import { jsToTreeNode } from './utils.js';
-
-export const ASTRO_IMAGE_ELEMENT = 'astro-image';
-export const ASTRO_IMAGE_IMPORT = '__AstroImage__';
-export const USES_ASTRO_IMAGE_FLAG = '__usesAstroImage';
-
-export function remarkImageToComponent() {
-	return function (tree: any, file: MarkdownVFile) {
-		if (!file.data.imagePaths) return;
-
-		const importsStatements: MdxjsEsm[] = [];
-		const importedImages = new Map<string, string>();
-
-		visit(tree, 'image', (node: Image, index: number | undefined, parent: Parent | null) => {
-			// Use the imagePaths set from the remark-collect-images so we don't have to duplicate the logic for
-			// checking if an image should be imported or not
-			if (file.data.imagePaths?.has(node.url)) {
-				let importName = importedImages.get(node.url);
-
-				// If we haven't already imported this image, add an import statement
-				if (!importName) {
-					importName = `__${importedImages.size}_${node.url.replace(/\W/g, '_')}__`;
-					importsStatements.push({
-						type: 'mdxjsEsm',
-						value: '',
-						data: {
-							estree: {
-								type: 'Program',
-								sourceType: 'module',
-								body: [
-									{
-										type: 'ImportDeclaration',
-										source: {
-											type: 'Literal',
-											value: node.url,
-											raw: JSON.stringify(node.url),
-										},
-										specifiers: [
-											{
-												type: 'ImportDefaultSpecifier',
-												local: { type: 'Identifier', name: importName },
-											},
-										],
-									},
-								],
-							},
-						},
-					});
-					importedImages.set(node.url, importName);
-				}
-
-				// Build a component that's equivalent to <Image src={importName} alt={node.alt} title={node.title} />
-				const componentElement: MdxJsxFlowElement = {
-					name: ASTRO_IMAGE_ELEMENT,
-					type: 'mdxJsxFlowElement',
-					attributes: [
-						{
-							name: 'src',
-							type: 'mdxJsxAttribute',
-							value: {
-								type: 'mdxJsxAttributeValueExpression',
-								value: importName,
-								data: {
-									estree: {
-										type: 'Program',
-										sourceType: 'module',
-										comments: [],
-										body: [
-											{
-												type: 'ExpressionStatement',
-												expression: { type: 'Identifier', name: importName },
-											},
-										],
-									},
-								},
-							},
-						},
-						{ name: 'alt', type: 'mdxJsxAttribute', value: node.alt || '' },
-					],
-					children: [],
-				};
-
-				if (node.title) {
-					componentElement.attributes.push({
-						type: 'mdxJsxAttribute',
-						name: 'title',
-						value: node.title,
-					});
-				}
-
-				if (node.data && node.data.hProperties) {
-					const createArrayAttribute = (name: string, values: string[]): MdxJsxAttribute => {
-						return {
-							type: 'mdxJsxAttribute',
-							name: name,
-							value: {
-								type: 'mdxJsxAttributeValueExpression',
-								value: name,
-								data: {
-									estree: {
-										type: 'Program',
-										body: [
-											{
-												type: 'ExpressionStatement',
-												expression: {
-													type: 'ArrayExpression',
-													elements: values.map((value) => ({
-														type: 'Literal',
-														value: value,
-														raw: String(value),
-													})),
-												},
-											},
-										],
-										sourceType: 'module',
-										comments: [],
-									},
-								},
-							},
-						};
-					};
-					// Go through every hProperty and add it as an attribute of the <Image>
-					Object.entries(node.data.hProperties as Record<string, string | string[]>).forEach(
-						([key, value]) => {
-							if (Array.isArray(value)) {
-								componentElement.attributes.push(createArrayAttribute(key, value));
-							} else {
-								componentElement.attributes.push({
-									name: key,
-									type: 'mdxJsxAttribute',
-									value: String(value),
-								});
-							}
-						}
-					);
-				}
-
-				parent!.children.splice(index!, 1, componentElement);
-			}
-		});
-
-		// Add all the import statements to the top of the file for the images
-		tree.children.unshift(...importsStatements);
-
-		tree.children.unshift(
-			jsToTreeNode(`import { Image as ${ASTRO_IMAGE_IMPORT} } from "astro:assets";`)
-		);
-		// Export `__usesAstroImage` to pick up `astro:assets` usage in the module graph.
-		// @see the '@astrojs/mdx-postprocess' plugin
-		tree.children.push(jsToTreeNode(`export const ${USES_ASTRO_IMAGE_FLAG} = true`));
-	};
-}
diff --git a/packages/integrations/mdx/src/vite-plugin-mdx-postprocess.ts b/packages/integrations/mdx/src/vite-plugin-mdx-postprocess.ts
index c60504be6c9c..7661c0ecf874 100644
--- a/packages/integrations/mdx/src/vite-plugin-mdx-postprocess.ts
+++ b/packages/integrations/mdx/src/vite-plugin-mdx-postprocess.ts
@@ -5,24 +5,27 @@ import {
 	ASTRO_IMAGE_ELEMENT,
 	ASTRO_IMAGE_IMPORT,
 	USES_ASTRO_IMAGE_FLAG,
-} from './remark-images-to-component.js';
+} from './rehype-images-to-component.js';
 import { type FileInfo, getFileInfo } from './utils.js';
 
+const underscoreFragmentImportRegex = /[\s,{]_Fragment[\s,}]/;
+const astroTagComponentImportRegex = /[\s,{]__astro_tag_component__[\s,}]/;
+
 // These transforms must happen *after* JSX runtime transformations
 export function vitePluginMdxPostprocess(astroConfig: AstroConfig): Plugin {
 	return {
 		name: '@astrojs/mdx-postprocess',
-		transform(code, id) {
+		transform(code, id, opts) {
 			if (!id.endsWith('.mdx')) return;
 
 			const fileInfo = getFileInfo(id, astroConfig);
 			const [imports, exports] = parse(code);
 
 			// Call a series of functions that transform the code
-			code = injectFragmentImport(code, imports);
+			code = injectUnderscoreFragmentImport(code, imports);
 			code = injectMetadataExports(code, exports, fileInfo);
 			code = transformContentExport(code, exports);
-			code = annotateContentExport(code, id);
+			code = annotateContentExport(code, id, !!opts?.ssr, imports);
 
 			// The code transformations above are append-only, so the line/column mappings are the same
 			// and we can omit the sourcemap for performance.
@@ -31,23 +34,12 @@ export function vitePluginMdxPostprocess(astroConfig: AstroConfig): Plugin {
 	};
 }
 
-const fragmentImportRegex = /[\s,{](?:Fragment,|Fragment\s*\})/;
-
 /**
- * Inject `Fragment` identifier import if not already present. It should already be injected,
- * but check just to be safe.
- *
- * TODO: Double-check if we no longer need this function.
+ * Inject `Fragment` identifier import if not already present.
  */
-function injectFragmentImport(code: string, imports: readonly ImportSpecifier[]) {
-	const importsFromJSXRuntime = imports
-		.filter(({ n }) => n === 'astro/jsx-runtime')
-		.map(({ ss, se }) => code.substring(ss, se));
-	const hasFragmentImport = importsFromJSXRuntime.some((statement) =>
-		fragmentImportRegex.test(statement)
-	);
-	if (!hasFragmentImport) {
-		code = `import { Fragment } from "astro/jsx-runtime"\n` + code;
+function injectUnderscoreFragmentImport(code: string, imports: readonly ImportSpecifier[]) {
+	if (!isSpecifierImported(code, imports, underscoreFragmentImportRegex, 'astro/jsx-runtime')) {
+		code += `\nimport { Fragment as _Fragment } from 'astro/jsx-runtime';`;
 	}
 	return code;
 }
@@ -81,7 +73,9 @@ function transformContentExport(code: string, exports: readonly ExportSpecifier[
 	const usesAstroImage = exports.find(({ n }) => n === USES_ASTRO_IMAGE_FLAG);
 
 	// Generate code for the `components` prop passed to `MDXContent`
-	let componentsCode = `{ Fragment${hasComponents ? ', ...components' : ''}, ...props.components,`;
+	let componentsCode = `{ Fragment: _Fragment${
+		hasComponents ? ', ...components' : ''
+	}, ...props.components,`;
 	if (usesAstroImage) {
 		componentsCode += ` ${JSON.stringify(ASTRO_IMAGE_ELEMENT)}: ${
 			hasComponents ? 'components.img ?? ' : ''
@@ -103,7 +97,12 @@ export default Content;`;
 /**
  * Add properties to the `Content` export.
  */
-function annotateContentExport(code: string, id: string) {
+function annotateContentExport(
+	code: string,
+	id: string,
+	ssr: boolean,
+	imports: readonly ImportSpecifier[]
+) {
 	// Mark `Content` as MDX component
 	code += `\nContent[Symbol.for('mdx-component')] = true`;
 	// Ensure styles and scripts are injected into a `<head>` when a layout is not applied
@@ -111,5 +110,39 @@ function annotateContentExport(code: string, id: string) {
 	// Assign the `moduleId` metadata to `Content`
 	code += `\nContent.moduleId = ${JSON.stringify(id)};`;
 
+	// Tag the `Content` export as "astro:jsx" so it's quicker to identify how to render this component
+	if (ssr) {
+		if (
+			!isSpecifierImported(
+				code,
+				imports,
+				astroTagComponentImportRegex,
+				'astro/runtime/server/index.js'
+			)
+		) {
+			code += `\nimport { __astro_tag_component__ } from 'astro/runtime/server/index.js';`;
+		}
+		code += `\n__astro_tag_component__(Content, 'astro:jsx');`;
+	}
+
 	return code;
 }
+
+/**
+ * Check whether the `specifierRegex` matches for an import of `source` in the `code`.
+ */
+function isSpecifierImported(
+	code: string,
+	imports: readonly ImportSpecifier[],
+	specifierRegex: RegExp,
+	source: string
+) {
+	for (const imp of imports) {
+		if (imp.n !== source) continue;
+
+		const importStatement = code.slice(imp.ss, imp.se);
+		if (specifierRegex.test(importStatement)) return true;
+	}
+
+	return false;
+}
diff --git a/packages/integrations/mdx/src/vite-plugin-mdx.ts b/packages/integrations/mdx/src/vite-plugin-mdx.ts
index 6f2ec2cc487a..1b966ecd2a30 100644
--- a/packages/integrations/mdx/src/vite-plugin-mdx.ts
+++ b/packages/integrations/mdx/src/vite-plugin-mdx.ts
@@ -1,13 +1,13 @@
-import fs from 'node:fs/promises';
 import { setVfileFrontmatter } from '@astrojs/markdown-remark';
-import type { AstroConfig, SSRError } from 'astro';
+import type { SSRError } from 'astro';
+import { getAstroMetadata } from 'astro/jsx/rehype.js';
 import { VFile } from 'vfile';
 import type { Plugin } from 'vite';
 import type { MdxOptions } from './index.js';
 import { createMdxProcessor } from './plugins.js';
-import { getFileInfo, parseFrontmatter } from './utils.js';
+import { parseFrontmatter } from './utils.js';
 
-export function vitePluginMdx(astroConfig: AstroConfig, mdxOptions: MdxOptions): Plugin {
+export function vitePluginMdx(mdxOptions: MdxOptions): Plugin {
 	let processor: ReturnType<typeof createMdxProcessor> | undefined;
 
 	return {
@@ -17,21 +17,19 @@ export function vitePluginMdx(astroConfig: AstroConfig, mdxOptions: MdxOptions):
 			processor = undefined;
 		},
 		configResolved(resolved) {
+			// `mdxOptions` should be populated at this point, but `astro sync` doesn't call `astro:config:done` :(
+			// Workaround this for now by skipping here. `astro sync` shouldn't call the `transform()` hook here anyways.
+			if (Object.keys(mdxOptions).length === 0) return;
+
 			processor = createMdxProcessor(mdxOptions, {
 				sourcemap: !!resolved.build.sourcemap,
 			});
 
-			// HACK: move ourselves before Astro's JSX plugin to transform things in the right order
+			// HACK: Remove the `astro:jsx` plugin if defined as we handle the JSX transformation ourselves
 			const jsxPluginIndex = resolved.plugins.findIndex((p) => p.name === 'astro:jsx');
 			if (jsxPluginIndex !== -1) {
-				const myPluginIndex = resolved.plugins.findIndex((p) => p.name === '@mdx-js/rollup');
-				if (myPluginIndex !== -1) {
-					const myPlugin = resolved.plugins[myPluginIndex];
-					// @ts-ignore-error ignore readonly annotation
-					resolved.plugins.splice(myPluginIndex, 1);
-					// @ts-ignore-error ignore readonly annotation
-					resolved.plugins.splice(jsxPluginIndex, 0, myPlugin);
-				}
+				// @ts-ignore-error ignore readonly annotation
+				resolved.plugins.splice(jsxPluginIndex, 1);
 			}
 		},
 		async resolveId(source, importer, options) {
@@ -43,13 +41,9 @@ export function vitePluginMdx(astroConfig: AstroConfig, mdxOptions: MdxOptions):
 		},
 		// Override transform to alter code before MDX compilation
 		// ex. inject layouts
-		async transform(_, id) {
+		async transform(code, id) {
 			if (!id.endsWith('.mdx')) return;
 
-			// Read code from file manually to prevent Vite from parsing `import.meta.env` expressions
-			const { fileId } = getFileInfo(id, astroConfig);
-			const code = await fs.readFile(fileId, 'utf-8');
-
 			const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
 
 			const vfile = new VFile({ value: pageContent, path: id });
@@ -70,13 +64,14 @@ export function vitePluginMdx(astroConfig: AstroConfig, mdxOptions: MdxOptions):
 				return {
 					code: String(compiled.value),
 					map: compiled.map,
+					meta: getMdxMeta(vfile),
 				};
 			} catch (e: any) {
 				const err: SSRError = e;
 
 				// For some reason MDX puts the error location in the error's name, not very useful for us.
 				err.name = 'MDXError';
-				err.loc = { file: fileId, line: e.line, column: e.column };
+				err.loc = { file: id, line: e.line, column: e.column };
 
 				// For another some reason, MDX doesn't include a stack trace. Weird
 				Error.captureStackTrace(err);
@@ -86,3 +81,20 @@ export function vitePluginMdx(astroConfig: AstroConfig, mdxOptions: MdxOptions):
 		},
 	};
 }
+
+function getMdxMeta(vfile: VFile): Record<string, any> {
+	const astroMetadata = getAstroMetadata(vfile);
+	if (!astroMetadata) {
+		throw new Error(
+			'Internal MDX error: Astro metadata is not set by rehype-analyze-astro-metadata'
+		);
+	}
+	return {
+		astro: astroMetadata,
+		vite: {
+			// Setting this vite metadata to `ts` causes Vite to resolve .js
+			// extensions to .ts files.
+			lang: 'ts',
+		},
+	};
+}
diff --git a/packages/integrations/mdx/test/fixtures/mdx-optimize/astro.config.mjs b/packages/integrations/mdx/test/fixtures/mdx-optimize/astro.config.mjs
index b92b48617c28..204549479f5d 100644
--- a/packages/integrations/mdx/test/fixtures/mdx-optimize/astro.config.mjs
+++ b/packages/integrations/mdx/test/fixtures/mdx-optimize/astro.config.mjs
@@ -3,7 +3,7 @@ import mdx from '@astrojs/mdx';
 export default {
 	integrations: [mdx({
 		optimize: {
-			customComponentNames: ['strong']
+			ignoreElementNames: ['strong']
 		}
 	})]
 }
diff --git a/packages/integrations/mdx/test/mdx-plugins.test.js b/packages/integrations/mdx/test/mdx-plugins.test.js
index 6b15884fb712..6bc8e096c268 100644
--- a/packages/integrations/mdx/test/mdx-plugins.test.js
+++ b/packages/integrations/mdx/test/mdx-plugins.test.js
@@ -64,6 +64,30 @@ describe('MDX plugins', () => {
 		assert.notEqual(selectRehypeExample(document), null);
 	});
 
+	it('supports custom rehype plugins from integrations', async () => {
+		const fixture = await buildFixture({
+			integrations: [
+				mdx(),
+				{
+					name: 'test',
+					hooks: {
+						'astro:config:setup': ({ updateConfig }) => {
+							updateConfig({
+								markdown: {
+									rehypePlugins: [rehypeExamplePlugin],
+								},
+							});
+						},
+					},
+				},
+			],
+		});
+		const html = await fixture.readFile(FILE);
+		const { document } = parseHTML(html);
+
+		assert.notEqual(selectRehypeExample(document), null);
+	});
+
 	it('supports custom rehype plugins with namespaced attributes', async () => {
 		const fixture = await buildFixture({
 			integrations: [
diff --git a/packages/integrations/mdx/test/units/rehype-optimize-static.test.js b/packages/integrations/mdx/test/units/rehype-optimize-static.test.js
new file mode 100644
index 000000000000..132f3849f5bf
--- /dev/null
+++ b/packages/integrations/mdx/test/units/rehype-optimize-static.test.js
@@ -0,0 +1,89 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { compile as _compile } from '@mdx-js/mdx';
+import { rehypeOptimizeStatic } from '../../dist/rehype-optimize-static.js';
+
+/**
+ * @param {string} mdxCode
+ * @param {Readonly<import('@mdx-js/mdx').CompileOptions>} options
+ */
+async function compile(mdxCode, options) {
+	const result = await _compile(mdxCode, {
+		jsx: true,
+		rehypePlugins: [rehypeOptimizeStatic],
+		...options,
+	});
+	const code = result.toString();
+	// Capture the returned JSX code for testing
+	const jsx = code.match(/return (.+);\n\}\nexport default function MDXContent/s)?.[1];
+	if (jsx == null) throw new Error('Could not find JSX code in compiled MDX');
+	return dedent(jsx);
+}
+
+function dedent(str) {
+	const lines = str.split('\n');
+	if (lines.length <= 1) return str;
+	// Get last line indent, and dedent this amount for the other lines
+	const lastLineIndent = lines[lines.length - 1].match(/^\s*/)[0].length;
+	return lines.map((line, i) => (i === 0 ? line : line.slice(lastLineIndent))).join('\n');
+}
+
+describe('rehype-optimize-static', () => {
+	it('works', async () => {
+		const jsx = await compile(`# hello`);
+		assert.equal(
+			jsx,
+			`\
+<_components.h1 {...{
+  "set:html": "hello"
+}} />`
+		);
+	});
+
+	it('groups sibling nodes as a single Fragment', async () => {
+		const jsx = await compile(`\
+# hello
+
+foo bar
+`);
+		assert.equal(
+			jsx,
+			`\
+<Fragment set:html="<h1>hello</h1>
+<p>foo bar</p>" />`
+		);
+	});
+
+	it('skips optimization of components', async () => {
+		const jsx = await compile(`\
+import Comp from './Comp.jsx';
+
+# hello
+
+This is a <Comp />
+`);
+		assert.equal(
+			jsx,
+			`\
+<><Fragment set:html="<h1>hello</h1>
+" /><_components.p>{"This is a "}<Comp /></_components.p></>`
+		);
+	});
+
+	it('optimizes explicit html elements', async () => {
+		const jsx = await compile(`\
+# hello
+
+foo <strong>bar</strong> baz
+
+<strong>qux</strong>
+`);
+		assert.equal(
+			jsx,
+			`\
+<Fragment set:html="<h1>hello</h1>
+<p>foo <strong>bar</strong> baz</p>
+<strong>qux</strong>" />`
+		);
+	});
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 225e8e10ec66..43aa94a54d14 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -775,6 +775,12 @@ importers:
       eol:
         specifier: ^0.9.1
         version: 0.9.1
+      mdast-util-mdx:
+        specifier: ^3.0.0
+        version: 3.0.0
+      mdast-util-mdx-jsx:
+        specifier: ^3.1.2
+        version: 3.1.2
       memfs:
         specifier: ^4.9.1
         version: 4.9.1
@@ -4426,6 +4432,9 @@ importers:
       '@types/estree':
         specifier: ^1.0.5
         version: 1.0.5
+      '@types/hast':
+        specifier: ^3.0.3
+        version: 3.0.4
       '@types/mdast':
         specifier: ^4.0.3
         version: 4.0.3
@@ -4447,6 +4456,9 @@ importers:
       mdast-util-mdx:
         specifier: ^3.0.0
         version: 3.0.0
+      mdast-util-mdx-jsx:
+        specifier: ^3.1.2
+        version: 3.1.2
       mdast-util-to-string:
         specifier: ^4.0.0
         version: 4.0.0

From 7bbd66459dd29a338ac1dfae0e4c984cb08f73b3 Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Wed, 8 May 2024 11:26:00 +0200
Subject: [PATCH 5/7] feat: Add new component to toolbar library (#10906)

* feat: progress

* chore: changeset
---
 .changeset/metal-crabs-applaud.md             |   5 +
 .changeset/twelve-dolphins-roll.md            |   5 +
 packages/astro/src/@types/astro.ts            |   2 +
 .../runtime/client/dev-toolbar/entrypoint.ts  |   2 +
 .../client/dev-toolbar/ui-library/button.ts   |  35 ++++-
 .../client/dev-toolbar/ui-library/index.ts    |   1 +
 .../dev-toolbar/ui-library/radio-checkbox.ts  | 121 ++++++++++++++++++
 7 files changed, 168 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/metal-crabs-applaud.md
 create mode 100644 .changeset/twelve-dolphins-roll.md
 create mode 100644 packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts

diff --git a/.changeset/metal-crabs-applaud.md b/.changeset/metal-crabs-applaud.md
new file mode 100644
index 000000000000..c7cb3a26a7f6
--- /dev/null
+++ b/.changeset/metal-crabs-applaud.md
@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Adds a new radio checkbox component to the dev toolbar UI library (`astro-dev-toolbar-radio-checkbox`)
diff --git a/.changeset/twelve-dolphins-roll.md b/.changeset/twelve-dolphins-roll.md
new file mode 100644
index 000000000000..baf944281d70
--- /dev/null
+++ b/.changeset/twelve-dolphins-roll.md
@@ -0,0 +1,5 @@
+---
+"astro": minor
+---
+
+Adds a new `buttonBorderRadius` property to the `astro-dev-toolbar-button` component for the dev toolbar component library. This property can be useful to make a fully rounded button with an icon in the center.
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index 0cff203cf227..af839ae61fda 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -33,6 +33,7 @@ import type {
 	DevToolbarCard,
 	DevToolbarHighlight,
 	DevToolbarIcon,
+	DevToolbarRadioCheckbox,
 	DevToolbarSelect,
 	DevToolbarToggle,
 	DevToolbarTooltip,
@@ -3087,6 +3088,7 @@ declare global {
 		'astro-dev-toolbar-icon': DevToolbarIcon;
 		'astro-dev-toolbar-card': DevToolbarCard;
 		'astro-dev-toolbar-select': DevToolbarSelect;
+		'astro-dev-toolbar-radio-checkbox': DevToolbarRadioCheckbox;
 
 		// Deprecated names
 		// TODO: Remove in Astro 5.0
diff --git a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
index dc8d043a252b..2558a4db2339 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts
@@ -25,6 +25,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 			DevToolbarBadge,
 			DevToolbarIcon,
 			DevToolbarSelect,
+			DevToolbarRadioCheckbox,
 		},
 	] = await Promise.all([
 		loadDevToolbarApps() as DevToolbarAppDefinition[],
@@ -48,6 +49,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 	customElements.define('astro-dev-toolbar-badge', DevToolbarBadge);
 	customElements.define('astro-dev-toolbar-icon', DevToolbarIcon);
 	customElements.define('astro-dev-toolbar-select', DevToolbarSelect);
+	customElements.define('astro-dev-toolbar-radio-checkbox', DevToolbarRadioCheckbox);
 
 	// Add deprecated names
 	// TODO: Remove in Astro 5.0
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
index 9a370581773d..067a1cf2ac90 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
@@ -2,13 +2,16 @@ import { settings } from '../settings.js';
 
 const sizes = ['small', 'medium', 'large'] as const;
 const styles = ['ghost', 'outline', 'purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;
+const borderRadii = ['normal', 'rounded'] as const;
 
 type ButtonSize = (typeof sizes)[number];
 type ButtonStyle = (typeof styles)[number];
+type ButtonBorderRadius = (typeof borderRadii)[number];
 
 export class DevToolbarButton extends HTMLElement {
 	_size: ButtonSize = 'small';
 	_buttonStyle: ButtonStyle = 'purple';
+	_buttonBorderRadius: ButtonBorderRadius = 'normal';
 
 	get size() {
 		return this._size;
@@ -40,7 +43,22 @@ export class DevToolbarButton extends HTMLElement {
 		this.updateStyle();
 	}
 
-	static observedAttributes = ['button-style', 'size'];
+	get buttonBorderRadius() {
+		return this._buttonBorderRadius;
+	}
+
+	set buttonBorderRadius(value) {
+		if (!borderRadii.includes(value)) {
+			settings.logger.error(
+				`Invalid border-radius: ${value}, expected one of ${borderRadii.join(', ')}, got ${value}.`
+			);
+			return;
+		}
+		this._buttonBorderRadius = value;
+		this.updateStyle();
+	}
+
+	static observedAttributes = ['button-style', 'size', 'button-border-radius'];
 
 	shadowRoot: ShadowRoot;
 
@@ -88,8 +106,14 @@ export class DevToolbarButton extends HTMLElement {
 					--small-font-size: 12px;
 
 					--large-padding: 12px 16px;
+					--large-rounded-padding: 12px 12px;
 					--medium-padding: 8px 12px;
+					--medium-rounded-padding: 8px 8px;
 					--small-padding: 4px 8px;
+					--small-rounded-padding: 4px 4px;
+
+					--normal-border-radius: 4px;
+					--rounded-border-radius: 9999px;
 
 					border: 1px solid var(--border);
 					padding: var(--padding);
@@ -97,7 +121,7 @@ export class DevToolbarButton extends HTMLElement {
 					background: var(--background);
 
 					color: var(--text-color);
-					border-radius: 4px;
+					border-radius: var(--border-radius);
 					display: flex;
 					align-items: center;
 					justify-content: center;
@@ -137,8 +161,13 @@ export class DevToolbarButton extends HTMLElement {
 				--background: var(--${this.buttonStyle}-background);
 				--border: var(--${this.buttonStyle}-border);
 				--font-size: var(--${this.size}-font-size);
-				--padding: var(--${this.size}-padding);
 				--text-color: var(--${this.buttonStyle}-text);
+				${
+					this.buttonBorderRadius === 'normal'
+						? '--padding: var(--' + this.size + '-padding);'
+						: '--padding: var(--' + this.size + '-rounded-padding);'
+				}
+				--border-radius: var(--${this.buttonBorderRadius}-border-radius);
 			}`;
 		}
 	}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
index 7b1197ab70c2..56765c4ca3ed 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/index.ts
@@ -7,3 +7,4 @@ export { DevToolbarSelect } from './select.js';
 export { DevToolbarToggle } from './toggle.js';
 export { DevToolbarTooltip } from './tooltip.js';
 export { DevToolbarWindow } from './window.js';
+export { DevToolbarRadioCheckbox } from './radio-checkbox.js';
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts
new file mode 100644
index 000000000000..a223bf1a848b
--- /dev/null
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/radio-checkbox.ts
@@ -0,0 +1,121 @@
+const styles = ['purple', 'gray', 'red', 'green', 'yellow', 'blue'] as const;
+
+type RadioStyle = (typeof styles)[number];
+
+export class DevToolbarRadioCheckbox extends HTMLElement {
+	private _radioStyle: RadioStyle = 'purple';
+	input: HTMLInputElement;
+
+	shadowRoot: ShadowRoot;
+
+	get radioStyle() {
+		return this._radioStyle;
+	}
+
+	set radioStyle(value) {
+		if (!styles.includes(value)) {
+			console.error(`Invalid style: ${value}, expected one of ${styles.join(', ')}.`);
+			return;
+		}
+		this._radioStyle = value;
+		this.updateStyle();
+	}
+
+	static observedAttributes = ['radio-style', 'checked', 'disabled', 'name', 'value'];
+
+	constructor() {
+		super();
+		this.shadowRoot = this.attachShadow({ mode: 'open' });
+
+		this.shadowRoot.innerHTML = `
+		<style>
+			:host {
+				--purple-unchecked: rgba(224, 204, 250, 0.33);
+				--purple-checked: rgba(224, 204, 250, 1);
+
+				--gray-unchecked: rgba(191, 193, 201, 0.33);
+				--gray-checked: rgba(191, 193, 201, 1);
+
+				--red-unchecked: rgba(249, 196, 215, 0.33);
+				--red-checked: rgba(179, 62, 102, 1);
+
+				--green-unchecked: rgba(213, 249, 196, 0.33);
+				--green-checked: rgba(61, 125, 31, 1);
+
+				--yellow-unchecked: rgba(255, 236, 179, 0.33);
+				--yellow-checked: rgba(181, 138, 45, 1);
+
+				--blue-unchecked: rgba(189, 195, 255, 0.33);
+				--blue-checked: rgba(54, 69, 217, 1);
+			}
+
+			input[type="radio"] {
+				appearance: none;
+				-webkit-appearance: none;
+				display: flex;
+				align-content: center;
+				justify-content: center;
+				border: 2px solid var(--unchecked-color);
+				border-radius: 9999px;
+				width: 16px;
+				height: 16px;
+			}
+
+			input[type="radio"]::before {
+				content: "";
+				background-color: var(--checked-color);
+				width: 8px;
+				height: 8px;
+				border-radius: 9999px;
+				visibility: hidden;
+				margin: 2px;
+			}
+
+			input[type="radio"]:checked {
+				border-color: var(--checked-color);
+			}
+
+			input[type="radio"]:checked::before {
+				visibility: visible;
+			}
+		</style>
+		<style id="selected-style"></style>
+		`;
+		this.input = document.createElement('input');
+		this.input.type = 'radio';
+		this.shadowRoot.append(this.input);
+	}
+
+	connectedCallback() {
+		this.updateInputState();
+		this.updateStyle();
+	}
+
+	updateStyle() {
+		const styleElement = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
+
+		if (styleElement) {
+			styleElement.innerHTML = `
+				:host {
+					--unchecked-color: var(--${this._radioStyle}-unchecked);
+					--checked-color: var(--${this._radioStyle}-checked);
+				}
+			`;
+		}
+	}
+
+	updateInputState() {
+		this.input.checked = this.hasAttribute('checked');
+		this.input.disabled = this.hasAttribute('disabled');
+		this.input.name = this.getAttribute('name') || '';
+		this.input.value = this.getAttribute('value') || '';
+	}
+
+	attributeChangedCallback() {
+		if (this.hasAttribute('radio-style')) {
+			this.radioStyle = this.getAttribute('radio-style') as RadioStyle;
+		}
+
+		this.updateInputState();
+	}
+}

From 47877a75404ccc8786bbea2171015fb088dc01a1 Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Wed, 8 May 2024 10:26:31 +0100
Subject: [PATCH 6/7] feat: rewriting (experimental) (#10867)

* feat: implement reroute in dev (#10818)

* chore: implement reroute in dev

* chore: revert naming change

* chore: conditionally create the new request

* chore: handle error

* remove only

* remove only

* chore: add tests and remove logs

* chore: fix regression

* chore: fix regression route matching

* chore: remove unwanted test

* feat: reroute in SSG (#10843)

* feat: rerouting in ssg

* linting

* feat: reroute for SSR (#10845)

* feat: implement reroute in dev (#10818)

* chore: implement reroute in dev

* chore: revert naming change

* chore: conditionally create the new request

* chore: handle error

* remove only

* remove only

* chore: add tests and remove logs

* chore: fix regression

* chore: fix regression route matching

* chore: remove unwanted test

* feat: reroute in SSG (#10843)

* feat: rerouting in ssg

* linting

* feat: rerouting in ssg

* linting

* feat: reroute for SSR

* fix rebase

* fix merge issue

* feat: rerouting in the middleware (#10853)

* feat: implement reroute in dev (#10818)

* chore: implement reroute in dev

* chore: revert naming change

* chore: conditionally create the new request

* chore: handle error

* remove only

* remove only

* chore: add tests and remove logs

* chore: fix regression

* chore: fix regression route matching

* chore: remove unwanted test

* feat: reroute in SSG (#10843)

* feat: rerouting in ssg

* linting

* feat: rerouting in ssg

* linting

* feat: reroute for SSR

* fix rebase

* fix merge issue

* feat: implement the `next(payload)` feature for rerouting

* chore: revert code

* chore: fix code

* Apply suggestions from code review

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

* feat: rerouting

* chore: rename to `rewrite`

* chore: better error message

* chore: update the chageset

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* chore: update docs based on feedback

* lock file

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by:  Matthew Phillips <matthew@skypack.dev>
Co-authored-by: Ben Holmes <hey@bholmes.dev>

* feedback

* rename

* add tests for 404

* revert change

* fix regression

* Update .changeset/pink-ligers-share.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Co-authored-by: Ben Holmes <hey@bholmes.dev>
---
 .changeset/pink-ligers-share.md               |  49 ++++
 packages/astro/src/@types/astro.ts            | 104 +++++++-
 packages/astro/src/core/app/index.ts          |  52 +---
 packages/astro/src/core/app/pipeline.ts       | 113 +++++++--
 packages/astro/src/core/app/types.ts          |   2 +
 packages/astro/src/core/base-pipeline.ts      |  19 ++
 packages/astro/src/core/build/generate.ts     |  78 +-----
 packages/astro/src/core/build/pipeline.ts     | 145 +++++++++++-
 .../src/core/build/plugins/plugin-manifest.ts |   1 +
 packages/astro/src/core/config/schema.ts      |   2 +
 packages/astro/src/core/errors/errors-data.ts |  12 +
 .../src/core/middleware/callMiddleware.ts     |  29 ++-
 packages/astro/src/core/middleware/index.ts   |  14 +-
 .../astro/src/core/middleware/sequence.ts     |  31 ++-
 packages/astro/src/core/render-context.ts     | 148 ++++++++++--
 packages/astro/src/prerender/routing.ts       |   2 +-
 .../src/vite-plugin-astro-server/pipeline.ts  |  94 ++++++--
 .../src/vite-plugin-astro-server/plugin.ts    |   4 +-
 .../src/vite-plugin-astro-server/route.ts     |  67 +++---
 .../middleware-virtual/astro.config.mjs       |   3 +
 .../fixtures/middleware-virtual/package.json  |   8 +
 .../middleware-virtual/src/middleware.js      |   6 +
 .../middleware-virtual/src/pages/index.astro  |  13 +
 .../test/fixtures/reroute/astro.config.mjs    |   9 +
 .../astro/test/fixtures/reroute/package.json  |   8 +
 .../test/fixtures/reroute/src/middleware.js   |  33 +++
 .../reroute/src/pages/auth/base.astro         |  10 +
 .../reroute/src/pages/auth/dashboard.astro    |  10 +
 .../reroute/src/pages/auth/settings.astro     |  10 +
 .../reroute/src/pages/blog/hello/index.astro  |  11 +
 .../reroute/src/pages/blog/oops.astro         |  11 +
 .../reroute/src/pages/blog/salut/index.astro  |  11 +
 .../reroute/src/pages/dynamic/[id].astro      |  21 ++
 .../fixtures/reroute/src/pages/index.astro    |  12 +
 .../fixtures/reroute/src/pages/reroute.astro  |  11 +
 .../reroute/src/pages/spread/[...id].astro    |  20 ++
 .../astro/test/i18n-routing-manual.test.js    |   2 -
 packages/astro/test/rewrite.test.js           | 223 ++++++++++++++++++
 .../test/units/routing/route-matching.test.js |   2 +-
 .../vite-plugin-astro-server/request.test.js  |   2 +-
 pnpm-lock.yaml                                |  12 +
 41 files changed, 1192 insertions(+), 222 deletions(-)
 create mode 100644 .changeset/pink-ligers-share.md
 create mode 100644 packages/astro/test/fixtures/middleware-virtual/astro.config.mjs
 create mode 100644 packages/astro/test/fixtures/middleware-virtual/package.json
 create mode 100644 packages/astro/test/fixtures/middleware-virtual/src/middleware.js
 create mode 100644 packages/astro/test/fixtures/middleware-virtual/src/pages/index.astro
 create mode 100644 packages/astro/test/fixtures/reroute/astro.config.mjs
 create mode 100644 packages/astro/test/fixtures/reroute/package.json
 create mode 100644 packages/astro/test/fixtures/reroute/src/middleware.js
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/auth/base.astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/auth/dashboard.astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/auth/settings.astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/blog/hello/index.astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/blog/oops.astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/blog/salut/index.astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/dynamic/[id].astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/index.astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/reroute.astro
 create mode 100644 packages/astro/test/fixtures/reroute/src/pages/spread/[...id].astro
 create mode 100644 packages/astro/test/rewrite.test.js

diff --git a/.changeset/pink-ligers-share.md b/.changeset/pink-ligers-share.md
new file mode 100644
index 000000000000..e7923350fb5b
--- /dev/null
+++ b/.changeset/pink-ligers-share.md
@@ -0,0 +1,49 @@
+---
+"astro": minor
+---
+
+Adds experimental rewriting in Astro with a new `rewrite()` function and the middleware `next()` function.
+
+The feature is available via an experimental flag in `astro.config.mjs`:
+
+```js
+export default defineConfig({
+  experimental: {
+    rewriting: true
+  }
+})
+```
+
+When enabled, you can use `rewrite()` to **render** another page without changing the URL of the browser in Astro pages and endpoints.
+
+```astro
+---
+// src/pages/dashboard.astro
+if (!Astro.props.allowed) {
+	return Astro.rewrite("/")
+}
+---
+```
+
+```js
+// src/pages/api.js
+export function GET(ctx) {
+  if (!ctx.locals.allowed) {
+    return ctx.rewrite("/")
+  }
+}
+```
+
+The middleware `next()` function now accepts a parameter with the same type as the `rewrite()` function. For example, with `next("/")`, you can call the next middleware function with a new `Request`.
+
+```js
+// src/middleware.js
+export function onRequest(ctx, next) {
+  if (!ctx.cookies.get("allowed")) {
+    return next("/") // new signature
+  }
+  return next();
+}
+```
+
+> **NOTE**: please [read the RFC](https://github.com/withastro/roadmap/blob/feat/reroute/proposals/0047-rerouting.md) to understand the current expectations of the new APIs.
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index af839ae61fda..cb39ec785ded 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -251,6 +251,19 @@ export interface AstroGlobal<
 	 * [Astro reference](https://docs.astro.build/en/guides/server-side-rendering/)
 	 */
 	redirect: AstroSharedContext['redirect'];
+	/**
+	 * It rewrites to another page. As opposed to redirects, the URL won't change, and Astro will render the HTML emitted
+	 * by the rewritten URL passed as argument.
+	 *
+	 * ## Example
+	 *
+	 * ```js
+	 * if (pageIsNotEnabled) {
+	 * 	return Astro.rewrite('/fallback-page')
+	 * }
+	 * ```
+	 */
+	rewrite: AstroSharedContext['rewrite'];
 	/**
 	 * The <Astro.self /> element allows a component to reference itself recursively.
 	 *
@@ -1642,7 +1655,7 @@ export interface AstroUserConfig {
 		domains?: Record<string, string>;
 	};
 
-	/** ⚠️ WARNING: SUBJECT TO CHANGE */
+	/** ! WARNING: SUBJECT TO CHANGE */
 	db?: Config.Database;
 
 	/**
@@ -1923,6 +1936,62 @@ export interface AstroUserConfig {
 				origin?: boolean;
 			};
 		};
+
+		/**
+		 * @docs
+		 * @name experimental.rewriting
+		 * @type {boolean}
+		 * @default `false`
+		 * @version 4.8.0
+		 * @description
+		 *
+		 * Enables a routing feature for rewriting requests in Astro pages, endpoints and Astro middleware, giving you programmatic control over your routes.
+		 *
+		 * ```js
+		 * {
+		 *   experimental: {
+		 *     rewriting: true,
+		 *   },
+		 * }
+		 * ```
+		 *
+		 * Use `Astro.rewrite` in your `.astro` files to reroute to a different page:
+		 *
+		 * ```astro "rewrite"
+		 * ---
+		 * // src/pages/dashboard.astro
+		 * if (!Astro.props.allowed) {
+		 * 	return Astro.rewrite("/")
+		 * }
+		 * ---
+		 * ```
+		 *
+		 * Use `context.rewrite` in your endpoint files to reroute to a different page:
+		 *
+		 * ```js
+		 * // src/pages/api.js
+		 * export function GET(ctx) {
+		 * 	if (!ctx.locals.allowed) {
+		 * 		return ctx.rewrite("/")
+		 * 	}
+		 * }
+		 * ```
+		 *
+		 * Use `next("/")` in your middleware file to reroute to a different page, and then call the next middleware function:
+		 *
+		 * ```js
+		 * // src/middleware.js
+		 * export function onRequest(ctx, next) {
+		 * 	if (!ctx.cookies.get("allowed")) {
+		 * 		return next("/") // new signature
+		 * 	}
+		 * 	return next();
+		 * }
+		 * ```
+		 *
+		 * For a complete overview, and to give feedback on this experimental API, see the [Rerouting RFC](https://github.com/withastro/roadmap/blob/feat/reroute/proposals/0047-rerouting.md).
+		 */
+		rewriting: boolean;
 	};
 }
 
@@ -2492,6 +2561,20 @@ interface AstroSharedContext<
 	 */
 	redirect(path: string, status?: ValidRedirectStatus): Response;
 
+	/**
+	 * It rewrites to another page. As opposed to redirects, the URL won't change, and Astro will render the HTML emitted
+	 * by the rerouted URL passed as argument.
+	 *
+	 * ## Example
+	 *
+	 * ```js
+	 * if (pageIsNotEnabled) {
+	 * 	return Astro.rewrite('/fallback-page')
+	 * }
+	 * ```
+	 */
+	rewrite(rewritePayload: RewritePayload): Promise<Response>;
+
 	/**
 	 * Object accessed via Astro middleware
 	 */
@@ -2606,6 +2689,21 @@ export interface APIContext<
 	 */
 	redirect: AstroSharedContext['redirect'];
 
+	/**
+	 * It reroutes to another page. As opposed to redirects, the URL won't change, and Astro will render the HTML emitted
+	 * by the rerouted URL passed as argument.
+	 *
+	 * ## Example
+	 *
+	 * ```ts
+	 * // src/pages/secret.ts
+	 * export function GET(ctx) {
+	 *   return ctx.rewrite(new URL("../"), ctx.url);
+	 * }
+	 * ```
+	 */
+	rewrite: AstroSharedContext['rewrite'];
+
 	/**
 	 * An object that middlewares can use to store extra information related to the request.
 	 *
@@ -2800,7 +2898,9 @@ export interface AstroIntegration {
 	};
 }
 
-export type MiddlewareNext = () => Promise<Response>;
+export type RewritePayload = string | URL | Request;
+
+export type MiddlewareNext = (rewritePayload?: RewritePayload) => Promise<Response>;
 export type MiddlewareHandler = (
 	context: APIContext,
 	next: MiddlewareNext
diff --git a/packages/astro/src/core/app/index.ts b/packages/astro/src/core/app/index.ts
index 116151610e1c..1ba5d9479833 100644
--- a/packages/astro/src/core/app/index.ts
+++ b/packages/astro/src/core/app/index.ts
@@ -1,13 +1,6 @@
-import type {
-	ComponentInstance,
-	ManifestData,
-	RouteData,
-	SSRManifest,
-} from '../../@types/astro.js';
+import type { ManifestData, RouteData, SSRManifest } from '../../@types/astro.js';
 import { normalizeTheLocale } from '../../i18n/index.js';
-import type { SinglePageBuiltModule } from '../build/types.js';
 import {
-	DEFAULT_404_COMPONENT,
 	REROUTABLE_STATUS_CODES,
 	REROUTE_DIRECTIVE_HEADER,
 	clientAddressSymbol,
@@ -26,7 +19,6 @@ import {
 	prependForwardSlash,
 	removeTrailingForwardSlash,
 } from '../path.js';
-import { RedirectSinglePageBuiltModule } from '../redirects/index.js';
 import { RenderContext } from '../render-context.js';
 import { createAssetLink } from '../render/ssr-element.js';
 import { ensure404Route } from '../routing/astro-designed-error-pages.js';
@@ -96,7 +88,7 @@ export class App {
 			routes: manifest.routes.map((route) => route.routeData),
 		});
 		this.#baseWithoutTrailingSlash = removeTrailingForwardSlash(this.#manifest.base);
-		this.#pipeline = this.#createPipeline(streaming);
+		this.#pipeline = this.#createPipeline(this.#manifestData, streaming);
 		this.#adapterLogger = new AstroIntegrationLogger(
 			this.#logger.options,
 			this.#manifest.adapterName
@@ -110,10 +102,11 @@ export class App {
 	/**
 	 * Creates a pipeline by reading the stored manifest
 	 *
+	 * @param manifestData
 	 * @param streaming
 	 * @private
 	 */
-	#createPipeline(streaming = false) {
+	#createPipeline(manifestData: ManifestData, streaming = false) {
 		if (this.#manifest.checkOrigin) {
 			this.#manifest.middleware = sequence(
 				createOriginCheckMiddleware(),
@@ -121,7 +114,7 @@ export class App {
 			);
 		}
 
-		return AppPipeline.create({
+		return AppPipeline.create(manifestData, {
 			logger: this.#logger,
 			manifest: this.#manifest,
 			mode: 'production',
@@ -309,7 +302,7 @@ export class App {
 		}
 		const pathname = this.#getPathnameFromRequest(request);
 		const defaultStatus = this.#getDefaultStatusCode(routeData, pathname);
-		const mod = await this.#getModuleForRoute(routeData);
+		const mod = await this.#pipeline.getModuleForRoute(routeData);
 
 		let response;
 		try {
@@ -405,7 +398,7 @@ export class App {
 
 				return this.#mergeResponses(response, originalResponse, override);
 			}
-			const mod = await this.#getModuleForRoute(errorRouteData);
+			const mod = await this.#pipeline.getModuleForRoute(errorRouteData);
 			try {
 				const renderContext = RenderContext.create({
 					locals,
@@ -493,35 +486,4 @@ export class App {
 		if (route.endsWith('/500')) return 500;
 		return 200;
 	}
-
-	async #getModuleForRoute(route: RouteData): Promise<SinglePageBuiltModule> {
-		if (route.component === DEFAULT_404_COMPONENT) {
-			return {
-				page: async () =>
-					({ default: () => new Response(null, { status: 404 }) }) as ComponentInstance,
-				renderers: [],
-			};
-		}
-		if (route.type === 'redirect') {
-			return RedirectSinglePageBuiltModule;
-		} else {
-			if (this.#manifest.pageMap) {
-				const importComponentInstance = this.#manifest.pageMap.get(route.component);
-				if (!importComponentInstance) {
-					throw new Error(
-						`Unexpectedly unable to find a component instance for route ${route.route}`
-					);
-				}
-				const pageModule = await importComponentInstance();
-				return pageModule;
-			} else if (this.#manifest.pageModule) {
-				const importComponentInstance = this.#manifest.pageModule;
-				return importComponentInstance;
-			} else {
-				throw new Error(
-					"Astro couldn't find the correct page to render, probably because it wasn't correctly mapped for SSR usage. This is an internal error, please file an issue."
-				);
-			}
-		}
-	}
 }
diff --git a/packages/astro/src/core/app/pipeline.ts b/packages/astro/src/core/app/pipeline.ts
index b1c615a1eb36..77d2f80b24f2 100644
--- a/packages/astro/src/core/app/pipeline.ts
+++ b/packages/astro/src/core/app/pipeline.ts
@@ -1,21 +1,46 @@
-import type { RouteData, SSRElement, SSRResult } from '../../@types/astro.js';
+import type {
+	ManifestData,
+	RouteData,
+	SSRElement,
+	SSRResult,
+	ComponentInstance,
+	RewritePayload,
+} from '../../@types/astro.js';
 import { Pipeline } from '../base-pipeline.js';
+import { DEFAULT_404_COMPONENT } from '../constants.js';
+import { RedirectSinglePageBuiltModule } from '../redirects/component.js';
 import { createModuleScriptElement, createStylesheetElementSet } from '../render/ssr-element.js';
+import type { SinglePageBuiltModule } from '../build/types.js';
 
 export class AppPipeline extends Pipeline {
-	static create({
-		logger,
-		manifest,
-		mode,
-		renderers,
-		resolve,
-		serverLike,
-		streaming,
-	}: Pick<
-		AppPipeline,
-		'logger' | 'manifest' | 'mode' | 'renderers' | 'resolve' | 'serverLike' | 'streaming'
-	>) {
-		return new AppPipeline(logger, manifest, mode, renderers, resolve, serverLike, streaming);
+	#manifestData: ManifestData | undefined;
+
+	static create(
+		manifestData: ManifestData,
+		{
+			logger,
+			manifest,
+			mode,
+			renderers,
+			resolve,
+			serverLike,
+			streaming,
+		}: Pick<
+			AppPipeline,
+			'logger' | 'manifest' | 'mode' | 'renderers' | 'resolve' | 'serverLike' | 'streaming'
+		>
+	) {
+		const pipeline = new AppPipeline(
+			logger,
+			manifest,
+			mode,
+			renderers,
+			resolve,
+			serverLike,
+			streaming
+		);
+		pipeline.#manifestData = manifestData;
+		return pipeline;
 	}
 
 	headElements(routeData: RouteData): Pick<SSRResult, 'scripts' | 'styles' | 'links'> {
@@ -41,4 +66,64 @@ export class AppPipeline extends Pipeline {
 	}
 
 	componentMetadata() {}
+	async getComponentByRoute(routeData: RouteData): Promise<ComponentInstance> {
+		const module = await this.getModuleForRoute(routeData);
+		return module.page();
+	}
+
+	async tryRewrite(payload: RewritePayload): Promise<[RouteData, ComponentInstance]> {
+		let foundRoute;
+
+		for (const route of this.#manifestData!.routes) {
+			if (payload instanceof URL) {
+				if (route.pattern.test(payload.pathname)) {
+					foundRoute = route;
+					break;
+				}
+			} else if (payload instanceof Request) {
+				const url = new URL(payload.url);
+				if (route.pattern.test(url.pathname)) {
+					foundRoute = route;
+					break;
+				}
+			} else if (route.pattern.test(decodeURI(payload))) {
+				foundRoute = route;
+				break;
+			}
+		}
+
+		if (foundRoute) {
+			const componentInstance = await this.getComponentByRoute(foundRoute);
+			return [foundRoute, componentInstance];
+		}
+		throw new Error('Route not found');
+	}
+
+	async getModuleForRoute(route: RouteData): Promise<SinglePageBuiltModule> {
+		if (route.component === DEFAULT_404_COMPONENT) {
+			return {
+				page: async () =>
+					({ default: () => new Response(null, { status: 404 }) }) as ComponentInstance,
+				renderers: [],
+			};
+		}
+		if (route.type === 'redirect') {
+			return RedirectSinglePageBuiltModule;
+		} else {
+			if (this.manifest.pageMap) {
+				const importComponentInstance = this.manifest.pageMap.get(route.component);
+				if (!importComponentInstance) {
+					throw new Error(
+						`Unexpectedly unable to find a component instance for route ${route.route}`
+					);
+				}
+				return await importComponentInstance();
+			} else if (this.manifest.pageModule) {
+				return this.manifest.pageModule;
+			}
+			throw new Error(
+				"Astro couldn't find the correct page to render, probably because it wasn't correctly mapped for SSR usage. This is an internal error, please file an issue."
+			);
+		}
+	}
 }
diff --git a/packages/astro/src/core/app/types.ts b/packages/astro/src/core/app/types.ts
index fd56c6f1068f..30134252ef9d 100644
--- a/packages/astro/src/core/app/types.ts
+++ b/packages/astro/src/core/app/types.ts
@@ -65,6 +65,8 @@ export type SSRManifest = {
 	i18n: SSRManifestI18n | undefined;
 	middleware: MiddlewareHandler;
 	checkOrigin: boolean;
+	// TODO: remove once the experimental flag is removed
+	rewritingEnabled: boolean;
 };
 
 export type SSRManifestI18n = {
diff --git a/packages/astro/src/core/base-pipeline.ts b/packages/astro/src/core/base-pipeline.ts
index 832823db35fa..11cff7c809f5 100644
--- a/packages/astro/src/core/base-pipeline.ts
+++ b/packages/astro/src/core/base-pipeline.ts
@@ -1,5 +1,7 @@
 import type {
+	ComponentInstance,
 	MiddlewareHandler,
+	RewritePayload,
 	RouteData,
 	RuntimeMode,
 	SSRLoadedRenderer,
@@ -59,6 +61,23 @@ export abstract class Pipeline {
 
 	abstract headElements(routeData: RouteData): Promise<HeadElements> | HeadElements;
 	abstract componentMetadata(routeData: RouteData): Promise<SSRResult['componentMetadata']> | void;
+
+	/**
+	 * It attempts to retrieve the `RouteData` that matches the input `url`, and the component that belongs to the `RouteData`.
+	 *
+	 * ## Errors
+	 *
+	 * - if not `RouteData` is found
+	 *
+	 * @param {RewritePayload} rewritePayload
+	 */
+	abstract tryRewrite(rewritePayload: RewritePayload): Promise<[RouteData, ComponentInstance]>;
+
+	/**
+	 * Tells the pipeline how to retrieve a component give a `RouteData`
+	 * @param routeData
+	 */
+	abstract getComponentByRoute(routeData: RouteData): Promise<ComponentInstance>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts
index ffe799f6e7e4..355d551eaa6c 100644
--- a/packages/astro/src/core/build/generate.ts
+++ b/packages/astro/src/core/build/generate.ts
@@ -35,24 +35,14 @@ import { getOutputDirectory } from '../../prerender/utils.js';
 import type { SSRManifestI18n } from '../app/types.js';
 import { NoPrerenderedRoutesWithDomains } from '../errors/errors-data.js';
 import { AstroError, AstroErrorData } from '../errors/index.js';
-import { routeIsFallback } from '../redirects/helpers.js';
-import {
-	RedirectSinglePageBuiltModule,
-	getRedirectLocationOrThrow,
-	routeIsRedirect,
-} from '../redirects/index.js';
+import { getRedirectLocationOrThrow, routeIsRedirect } from '../redirects/index.js';
 import { RenderContext } from '../render-context.js';
 import { callGetStaticPaths } from '../render/route-cache.js';
 import { createRequest } from '../request.js';
 import { matchRoute } from '../routing/match.js';
 import { getOutputFilename, isServerLikeOutput } from '../util.js';
 import { getOutDirWithinCwd, getOutFile, getOutFolder } from './common.js';
-import {
-	cssOrder,
-	getEntryFilePathFromComponentPath,
-	getPageDataByComponent,
-	mergeInlineCss,
-} from './internal.js';
+import { cssOrder, getPageDataByComponent, mergeInlineCss } from './internal.js';
 import { BuildPipeline } from './pipeline.js';
 import type {
 	PageBuildData,
@@ -66,46 +56,6 @@ function createEntryURL(filePath: string, outFolder: URL) {
 	return new URL('./' + filePath + `?time=${Date.now()}`, outFolder);
 }
 
-async function getEntryForRedirectRoute(
-	route: RouteData,
-	internals: BuildInternals,
-	outFolder: URL
-): Promise<SinglePageBuiltModule> {
-	if (route.type !== 'redirect') {
-		throw new Error(`Expected a redirect route.`);
-	}
-	if (route.redirectRoute) {
-		const filePath = getEntryFilePathFromComponentPath(internals, route.redirectRoute.component);
-		if (filePath) {
-			const url = createEntryURL(filePath, outFolder);
-			const ssrEntryPage: SinglePageBuiltModule = await import(url.toString());
-			return ssrEntryPage;
-		}
-	}
-
-	return RedirectSinglePageBuiltModule;
-}
-
-async function getEntryForFallbackRoute(
-	route: RouteData,
-	internals: BuildInternals,
-	outFolder: URL
-): Promise<SinglePageBuiltModule> {
-	if (route.type !== 'fallback') {
-		throw new Error(`Expected a redirect route.`);
-	}
-	if (route.redirectRoute) {
-		const filePath = getEntryFilePathFromComponentPath(internals, route.redirectRoute.component);
-		if (filePath) {
-			const url = createEntryURL(filePath, outFolder);
-			const ssrEntryPage: SinglePageBuiltModule = await import(url.toString());
-			return ssrEntryPage;
-		}
-	}
-
-	return RedirectSinglePageBuiltModule;
-}
-
 // Gives back a facadeId that is relative to the root.
 // ie, src/pages/index.astro instead of /Users/name..../src/pages/index.astro
 export function rootRelativeFacadeId(facadeId: string, settings: AstroSettings): string {
@@ -185,14 +135,15 @@ export async function generatePages(options: StaticBuildOptions, internals: Buil
 					});
 				}
 
-				const ssrEntryURLPage = createEntryURL(filePath, outFolder);
-				const ssrEntryPage = await import(ssrEntryURLPage.toString());
+				const ssrEntryPage = await pipeline.retrieveSsrEntry(pageData.route, filePath);
 				if (options.settings.adapter?.adapterFeatures?.functionPerRoute) {
 					// forcing to use undefined, so we fail in an expected way if the module is not even there.
+					// @ts-expect-error When building for `functionPerRoute`, the module exports a `pageModule` function instead
 					const ssrEntry = ssrEntryPage?.pageModule;
 					if (ssrEntry) {
 						await generatePage(pageData, ssrEntry, builtPaths, pipeline);
 					} else {
+						const ssrEntryURLPage = createEntryURL(filePath, outFolder);
 						throw new Error(
 							`Unable to find the manifest for the module ${ssrEntryURLPage.toString()}. This is unexpected and likely a bug in Astro, please report.`
 						);
@@ -205,18 +156,8 @@ export async function generatePages(options: StaticBuildOptions, internals: Buil
 		}
 	} else {
 		for (const [pageData, filePath] of pagesToGenerate) {
-			if (routeIsRedirect(pageData.route)) {
-				const entry = await getEntryForRedirectRoute(pageData.route, internals, outFolder);
-				await generatePage(pageData, entry, builtPaths, pipeline);
-			} else if (routeIsFallback(pageData.route)) {
-				const entry = await getEntryForFallbackRoute(pageData.route, internals, outFolder);
-				await generatePage(pageData, entry, builtPaths, pipeline);
-			} else {
-				const ssrEntryURLPage = createEntryURL(filePath, outFolder);
-				const entry: SinglePageBuiltModule = await import(ssrEntryURLPage.toString());
-
-				await generatePage(pageData, entry, builtPaths, pipeline);
-			}
+			const entry = await pipeline.retrieveSsrEntry(pageData.route, filePath);
+			await generatePage(pageData, entry, builtPaths, pipeline);
 		}
 	}
 	logger.info(
@@ -232,12 +173,12 @@ export async function generatePages(options: StaticBuildOptions, internals: Buil
 			.map((x) => x.transforms.size)
 			.reduce((a, b) => a + b, 0);
 		const cpuCount = os.cpus().length;
-		const assetsCreationpipeline = await prepareAssetsGenerationEnv(pipeline, totalCount);
+		const assetsCreationPipeline = await prepareAssetsGenerationEnv(pipeline, totalCount);
 		const queue = new PQueue({ concurrency: Math.max(cpuCount, 1) });
 
 		const assetsTimer = performance.now();
 		for (const [originalPath, transforms] of staticImageList) {
-			await generateImagesForPath(originalPath, transforms, assetsCreationpipeline, queue);
+			await generateImagesForPath(originalPath, transforms, assetsCreationPipeline, queue);
 		}
 
 		await queue.onIdle();
@@ -615,6 +556,7 @@ function createBuildManifest(
 		i18n: i18nManifest,
 		buildFormat: settings.config.build.format,
 		middleware,
+		rewritingEnabled: settings.config.experimental.rewriting,
 		checkOrigin: settings.config.experimental.security?.csrfProtection?.origin ?? false,
 	};
 }
diff --git a/packages/astro/src/core/build/pipeline.ts b/packages/astro/src/core/build/pipeline.ts
index a78c8eaf893c..532759f1e426 100644
--- a/packages/astro/src/core/build/pipeline.ts
+++ b/packages/astro/src/core/build/pipeline.ts
@@ -1,4 +1,10 @@
-import type { RouteData, SSRLoadedRenderer, SSRResult } from '../../@types/astro.js';
+import type {
+	ComponentInstance,
+	RewritePayload,
+	RouteData,
+	SSRLoadedRenderer,
+	SSRResult,
+} from '../../@types/astro.js';
 import { getOutputDirectory } from '../../prerender/utils.js';
 import { BEFORE_HYDRATION_SCRIPT_ID, PAGE_SCRIPT_ID } from '../../vite-plugin-scripts/index.js';
 import type { SSRManifest } from '../app/types.js';
@@ -13,20 +19,44 @@ import { isServerLikeOutput } from '../util.js';
 import {
 	type BuildInternals,
 	cssOrder,
+	getEntryFilePathFromComponentPath,
 	getPageDataByComponent,
 	mergeInlineCss,
 } from './internal.js';
 import { ASTRO_PAGE_MODULE_ID, ASTRO_PAGE_RESOLVED_MODULE_ID } from './plugins/plugin-pages.js';
 import { RESOLVED_SPLIT_MODULE_ID } from './plugins/plugin-ssr.js';
-import { getVirtualModulePageNameFromPath } from './plugins/util.js';
-import { ASTRO_PAGE_EXTENSION_POST_PATTERN } from './plugins/util.js';
-import type { PageBuildData, StaticBuildOptions } from './types.js';
+import {
+	ASTRO_PAGE_EXTENSION_POST_PATTERN,
+	getVirtualModulePageNameFromPath,
+} from './plugins/util.js';
+import type { PageBuildData, SinglePageBuiltModule, StaticBuildOptions } from './types.js';
 import { i18nHasFallback } from './util.js';
+import { RedirectSinglePageBuiltModule } from '../redirects/index.js';
+import { getOutDirWithinCwd } from './common.js';
+import { RouteNotFound } from '../errors/errors-data.js';
+import { AstroError } from '../errors/index.js';
 
 /**
  * The build pipeline is responsible to gather the files emitted by the SSR build and generate the pages by executing these files.
  */
 export class BuildPipeline extends Pipeline {
+	#componentsInterner: WeakMap<RouteData, SinglePageBuiltModule> = new WeakMap<
+		RouteData,
+		SinglePageBuiltModule
+	>();
+	/**
+	 * This cache is needed to map a single `RouteData` to its file path.
+	 * @private
+	 */
+	#routesByFilePath: WeakMap<RouteData, string> = new WeakMap<RouteData, string>();
+
+	get outFolder() {
+		const ssr = isServerLikeOutput(this.settings.config);
+		return ssr
+			? this.settings.config.build.server
+			: getOutDirWithinCwd(this.settings.config.outDir);
+	}
+
 	private constructor(
 		readonly internals: BuildInternals,
 		readonly manifest: SSRManifest,
@@ -225,6 +255,113 @@ export class BuildPipeline extends Pipeline {
 			}
 		}
 
+		for (const [buildData, filePath] of pages.entries()) {
+			this.#routesByFilePath.set(buildData.route, filePath);
+		}
+
 		return pages;
 	}
+
+	async getComponentByRoute(routeData: RouteData): Promise<ComponentInstance> {
+		if (this.#componentsInterner.has(routeData)) {
+			// SAFETY: checked before
+			const entry = this.#componentsInterner.get(routeData)!;
+			return await entry.page();
+		} else {
+			// SAFETY: the pipeline calls `retrieveRoutesToGenerate`, which is in charge to fill the cache.
+			const filePath = this.#routesByFilePath.get(routeData)!;
+			const module = await this.retrieveSsrEntry(routeData, filePath);
+			return module.page();
+		}
+	}
+
+	async tryRewrite(payload: RewritePayload): Promise<[RouteData, ComponentInstance]> {
+		let foundRoute: RouteData | undefined;
+		// options.manifest is the actual type that contains the information
+		for (const route of this.options.manifest.routes) {
+			if (payload instanceof URL) {
+				if (route.pattern.test(payload.pathname)) {
+					foundRoute = route;
+					break;
+				}
+			} else if (payload instanceof Request) {
+				const url = new URL(payload.url);
+				if (route.pattern.test(url.pathname)) {
+					foundRoute = route;
+					break;
+				}
+			} else if (route.pattern.test(decodeURI(payload))) {
+				foundRoute = route;
+				break;
+			}
+		}
+		if (foundRoute) {
+			const componentInstance = await this.getComponentByRoute(foundRoute);
+			return [foundRoute, componentInstance];
+		} else {
+			throw new AstroError(RouteNotFound);
+		}
+	}
+
+	async retrieveSsrEntry(route: RouteData, filePath: string): Promise<SinglePageBuiltModule> {
+		if (this.#componentsInterner.has(route)) {
+			// SAFETY: it is checked inside the if
+			return this.#componentsInterner.get(route)!;
+		}
+		let entry;
+		if (routeIsRedirect(route)) {
+			entry = await this.#getEntryForRedirectRoute(route, this.internals, this.outFolder);
+		} else if (routeIsFallback(route)) {
+			entry = await this.#getEntryForFallbackRoute(route, this.internals, this.outFolder);
+		} else {
+			const ssrEntryURLPage = createEntryURL(filePath, this.outFolder);
+			entry = await import(ssrEntryURLPage.toString());
+		}
+		this.#componentsInterner.set(route, entry);
+		return entry;
+	}
+
+	async #getEntryForFallbackRoute(
+		route: RouteData,
+		internals: BuildInternals,
+		outFolder: URL
+	): Promise<SinglePageBuiltModule> {
+		if (route.type !== 'fallback') {
+			throw new Error(`Expected a redirect route.`);
+		}
+		if (route.redirectRoute) {
+			const filePath = getEntryFilePathFromComponentPath(internals, route.redirectRoute.component);
+			if (filePath) {
+				const url = createEntryURL(filePath, outFolder);
+				const ssrEntryPage: SinglePageBuiltModule = await import(url.toString());
+				return ssrEntryPage;
+			}
+		}
+
+		return RedirectSinglePageBuiltModule;
+	}
+
+	async #getEntryForRedirectRoute(
+		route: RouteData,
+		internals: BuildInternals,
+		outFolder: URL
+	): Promise<SinglePageBuiltModule> {
+		if (route.type !== 'redirect') {
+			throw new Error(`Expected a redirect route.`);
+		}
+		if (route.redirectRoute) {
+			const filePath = getEntryFilePathFromComponentPath(internals, route.redirectRoute.component);
+			if (filePath) {
+				const url = createEntryURL(filePath, outFolder);
+				const ssrEntryPage: SinglePageBuiltModule = await import(url.toString());
+				return ssrEntryPage;
+			}
+		}
+
+		return RedirectSinglePageBuiltModule;
+	}
+}
+
+function createEntryURL(filePath: string, outFolder: URL) {
+	return new URL('./' + filePath + `?time=${Date.now()}`, outFolder);
 }
diff --git a/packages/astro/src/core/build/plugins/plugin-manifest.ts b/packages/astro/src/core/build/plugins/plugin-manifest.ts
index 498ccdbb544b..5bb6ddab038a 100644
--- a/packages/astro/src/core/build/plugins/plugin-manifest.ts
+++ b/packages/astro/src/core/build/plugins/plugin-manifest.ts
@@ -277,5 +277,6 @@ function buildManifest(
 		i18n: i18nManifest,
 		buildFormat: settings.config.build.format,
 		checkOrigin: settings.config.experimental.security?.csrfProtection?.origin ?? false,
+		rewritingEnabled: settings.config.experimental.rewriting,
 	};
 }
diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
index 303846f7608f..0fd4c58e66fd 100644
--- a/packages/astro/src/core/config/schema.ts
+++ b/packages/astro/src/core/config/schema.ts
@@ -87,6 +87,7 @@ const ASTRO_CONFIG_DEFAULTS = {
 		globalRoutePriority: false,
 		i18nDomains: false,
 		security: {},
+		rewriting: false,
 	},
 } satisfies AstroUserConfig & { server: { open: boolean } };
 
@@ -525,6 +526,7 @@ export const AstroConfigSchema = z.object({
 				.optional()
 				.default(ASTRO_CONFIG_DEFAULTS.experimental.security),
 			i18nDomains: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.i18nDomains),
+			rewriting: z.boolean().optional().default(ASTRO_CONFIG_DEFAULTS.experimental.rewriting),
 		})
 		.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.`
diff --git a/packages/astro/src/core/errors/errors-data.ts b/packages/astro/src/core/errors/errors-data.ts
index 180160064ab1..7ebc3a3831a1 100644
--- a/packages/astro/src/core/errors/errors-data.ts
+++ b/packages/astro/src/core/errors/errors-data.ts
@@ -1483,6 +1483,18 @@ export const UnsupportedConfigTransformError = {
 	hint: 'See the devalue library for all supported types: https://github.com/rich-harris/devalue',
 } satisfies ErrorData;
 
+/**
+ * @docs
+ * @description
+ *
+ * Astro couldn't find a route matching the one provided by the user
+ */
+export const RouteNotFound = {
+	name: 'RouteNotFound',
+	title: 'Route not found.',
+	message: `Astro could find a route that matches the one you requested.`,
+} satisfies ErrorData;
+
 // Generic catch-all - Only use this in extreme cases, like if there was a cosmic ray bit flip.
 export const UnknownError = { name: 'UnknownError', title: 'Unknown Error.' } satisfies ErrorData;
 
diff --git a/packages/astro/src/core/middleware/callMiddleware.ts b/packages/astro/src/core/middleware/callMiddleware.ts
index 0133c13d032d..b92e0f3cb19b 100644
--- a/packages/astro/src/core/middleware/callMiddleware.ts
+++ b/packages/astro/src/core/middleware/callMiddleware.ts
@@ -1,5 +1,11 @@
-import type { APIContext, MiddlewareHandler, MiddlewareNext } from '../../@types/astro.js';
+import type {
+	APIContext,
+	MiddlewareHandler,
+	MiddlewareNext,
+	RewritePayload,
+} from '../../@types/astro.js';
 import { AstroError, AstroErrorData } from '../errors/index.js';
+import type { Logger } from '../logger/core.js';
 
 /**
  * Utility function that is in charge of calling the middleware.
@@ -38,13 +44,28 @@ import { AstroError, AstroErrorData } from '../errors/index.js';
 export async function callMiddleware(
 	onRequest: MiddlewareHandler,
 	apiContext: APIContext,
-	responseFunction: () => Promise<Response> | Response
+	responseFunction: (
+		apiContext: APIContext,
+		rewritePayload?: RewritePayload
+	) => Promise<Response> | Response,
+	// TODO: remove these two arguments once rerouting goes out of experimental
+	enableRerouting: boolean,
+	logger: Logger
 ): Promise<Response> {
 	let nextCalled = false;
 	let responseFunctionPromise: Promise<Response> | Response | undefined = undefined;
-	const next: MiddlewareNext = async () => {
+	const next: MiddlewareNext = async (payload) => {
 		nextCalled = true;
-		responseFunctionPromise = responseFunction();
+		if (enableRerouting) {
+			responseFunctionPromise = responseFunction(apiContext, payload);
+		} else {
+			logger.warn(
+				'router',
+				'The rewrite API is experimental. To use this feature, add the `rewriting` flag to the `experimental` object in your Astro config.'
+			);
+			responseFunctionPromise = responseFunction(apiContext);
+		}
+		// We need to pass the APIContext pass to `callMiddleware` because it can be mutated across middleware functions
 		return responseFunctionPromise;
 	};
 
diff --git a/packages/astro/src/core/middleware/index.ts b/packages/astro/src/core/middleware/index.ts
index cb9304bffbe1..17c206d6e9f5 100644
--- a/packages/astro/src/core/middleware/index.ts
+++ b/packages/astro/src/core/middleware/index.ts
@@ -1,17 +1,14 @@
-import type { APIContext, MiddlewareHandler, Params } from '../../@types/astro.js';
+import type { APIContext, MiddlewareHandler, Params, RewritePayload } from '../../@types/astro.js';
 import {
 	computeCurrentLocale,
 	computePreferredLocale,
 	computePreferredLocaleList,
 } from '../../i18n/utils.js';
-import { ASTRO_VERSION } from '../constants.js';
+import { ASTRO_VERSION, clientLocalsSymbol, clientAddressSymbol } from '../constants.js';
 import { AstroCookies } from '../cookies/index.js';
 import { AstroError, AstroErrorData } from '../errors/index.js';
 import { sequence } from './sequence.js';
 
-const clientAddressSymbol = Symbol.for('astro.clientAddress');
-const clientLocalsSymbol = Symbol.for('astro.locals');
-
 function defineMiddleware(fn: MiddlewareHandler) {
 	return fn;
 }
@@ -49,6 +46,12 @@ function createContext({
 	const url = new URL(request.url);
 	const route = url.pathname;
 
+	// TODO verify that this function works in an edge middleware environment
+	const reroute = (_reroutePayload: RewritePayload) => {
+		// return dummy response
+		return Promise.resolve(new Response(null));
+	};
+
 	return {
 		cookies: new AstroCookies(request),
 		request,
@@ -56,6 +59,7 @@ function createContext({
 		site: undefined,
 		generator: `Astro v${ASTRO_VERSION}`,
 		props: {},
+		rewrite: reroute,
 		redirect(path, status) {
 			return new Response(null, {
 				status: status || 302,
diff --git a/packages/astro/src/core/middleware/sequence.ts b/packages/astro/src/core/middleware/sequence.ts
index 9a68963945ec..ef27d03c2cb4 100644
--- a/packages/astro/src/core/middleware/sequence.ts
+++ b/packages/astro/src/core/middleware/sequence.ts
@@ -1,5 +1,6 @@
-import type { APIContext, MiddlewareHandler } from '../../@types/astro.js';
+import type { APIContext, MiddlewareHandler, RewritePayload } from '../../@types/astro.js';
 import { defineMiddleware } from './index.js';
+import { AstroCookies } from '../cookies/cookies.js';
 
 // From SvelteKit: https://github.com/sveltejs/kit/blob/master/packages/kit/src/exports/hooks/sequence.js
 /**
@@ -10,13 +11,16 @@ export function sequence(...handlers: MiddlewareHandler[]): MiddlewareHandler {
 	const filtered = handlers.filter((h) => !!h);
 	const length = filtered.length;
 	if (!length) {
-		const handler: MiddlewareHandler = defineMiddleware((context, next) => {
+		return defineMiddleware((_context, next) => {
 			return next();
 		});
-		return handler;
 	}
 
 	return defineMiddleware((context, next) => {
+		/**
+		 * This variable is used to carry the rerouting payload across middleware functions.
+		 */
+		let carriedPayload: RewritePayload | undefined = undefined;
 		return applyHandle(0, context);
 
 		function applyHandle(i: number, handleContext: APIContext) {
@@ -24,11 +28,28 @@ export function sequence(...handlers: MiddlewareHandler[]): MiddlewareHandler {
 			// @ts-expect-error
 			// SAFETY: Usually `next` always returns something in user land, but in `sequence` we are actually
 			// doing a loop over all the `next` functions, and eventually we call the last `next` that returns the `Response`.
-			const result = handle(handleContext, async () => {
+			const result = handle(handleContext, async (payload: RewritePayload) => {
 				if (i < length - 1) {
+					if (payload) {
+						let newRequest;
+						if (payload instanceof Request) {
+							newRequest = payload;
+						} else if (payload instanceof URL) {
+							newRequest = new Request(payload, handleContext.request);
+						} else {
+							newRequest = new Request(
+								new URL(payload, handleContext.url.origin),
+								handleContext.request
+							);
+						}
+						carriedPayload = payload;
+						handleContext.request = newRequest;
+						handleContext.url = new URL(newRequest.url);
+						handleContext.cookies = new AstroCookies(newRequest);
+					}
 					return applyHandle(i + 1, handleContext);
 				} else {
-					return next();
+					return next(payload ?? carriedPayload);
 				}
 			});
 			return result;
diff --git a/packages/astro/src/core/render-context.ts b/packages/astro/src/core/render-context.ts
index 5cfc8ef2ede3..279745ac19e4 100644
--- a/packages/astro/src/core/render-context.ts
+++ b/packages/astro/src/core/render-context.ts
@@ -4,6 +4,8 @@ import type {
 	AstroGlobalPartial,
 	ComponentInstance,
 	MiddlewareHandler,
+	MiddlewareNext,
+	RewritePayload,
 	RouteData,
 	SSRResult,
 } from '../@types/astro.js';
@@ -39,14 +41,23 @@ export class RenderContext {
 		public locals: App.Locals,
 		readonly middleware: MiddlewareHandler,
 		readonly pathname: string,
-		readonly request: Request,
-		readonly routeData: RouteData,
+		public request: Request,
+		public routeData: RouteData,
 		public status: number,
-		readonly cookies = new AstroCookies(request),
-		readonly params = getParams(routeData, pathname),
-		readonly url = new URL(request.url)
+		protected cookies = new AstroCookies(request),
+		public params = getParams(routeData, pathname),
+		protected url = new URL(request.url)
 	) {}
 
+	/**
+	 * A flag that tells the render content if the rewriting was triggered
+	 */
+	isRewriting = false;
+	/**
+	 * A safety net in case of loops
+	 */
+	counter = 0;
+
 	static create({
 		locals = {},
 		middleware,
@@ -56,7 +67,7 @@ export class RenderContext {
 		routeData,
 		status = 200,
 	}: Pick<RenderContext, 'pathname' | 'pipeline' | 'request' | 'routeData'> &
-		Partial<Pick<RenderContext, 'locals' | 'middleware' | 'status'>>) {
+		Partial<Pick<RenderContext, 'locals' | 'middleware' | 'status'>>): RenderContext {
 		return new RenderContext(
 			pipeline,
 			locals,
@@ -80,11 +91,11 @@ export class RenderContext {
 	 * - fallback
 	 */
 	async render(componentInstance: ComponentInstance | undefined): Promise<Response> {
-		const { cookies, middleware, pathname, pipeline, routeData } = this;
+		const { cookies, middleware, pathname, pipeline } = this;
 		const { logger, routeCache, serverLike, streaming } = pipeline;
 		const props = await getProps({
 			mod: componentInstance,
-			routeData,
+			routeData: this.routeData,
 			routeCache,
 			pathname,
 			logger,
@@ -92,10 +103,40 @@ export class RenderContext {
 		});
 		const apiContext = this.createAPIContext(props);
 
-		const lastNext = async () => {
-			switch (routeData.type) {
+		this.counter++;
+		if (this.counter === 4) {
+			return new Response('Loop Detected', {
+				// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/508
+				status: 508,
+				statusText:
+					'Astro detected a loop where you tried to call the rewriting logic more than four times.',
+			});
+		}
+		const lastNext = async (ctx: APIContext, payload?: RewritePayload) => {
+			if (payload) {
+				if (this.pipeline.manifest.rewritingEnabled) {
+					try {
+						const [routeData, component] = await pipeline.tryRewrite(payload);
+						this.routeData = routeData;
+						componentInstance = component;
+					} catch (e) {
+						return new Response('Not found', {
+							status: 404,
+							statusText: 'Not found',
+						});
+					} finally {
+						this.isRewriting = true;
+					}
+				} else {
+					this.pipeline.logger.warn(
+						'router',
+						'The rewrite API is experimental. To use this feature, add the `rewriting` flag to the `experimental` object in your Astro config.'
+					);
+				}
+			}
+			switch (this.routeData.type) {
 				case 'endpoint':
-					return renderEndpoint(componentInstance as any, apiContext, serverLike, logger);
+					return renderEndpoint(componentInstance as any, ctx, serverLike, logger);
 				case 'redirect':
 					return renderRedirect(this);
 				case 'page': {
@@ -108,7 +149,7 @@ export class RenderContext {
 							props,
 							{},
 							streaming,
-							routeData
+							this.routeData
 						);
 					} catch (e) {
 						// If there is an error in the page's frontmatter or instantiation of the RenderTemplate fails midway,
@@ -119,7 +160,11 @@ export class RenderContext {
 					// Signal to the i18n middleware to maybe act on this response
 					response.headers.set(ROUTE_TYPE_HEADER, 'page');
 					// Signal to the error-page-rerouting infra to let this response pass through to avoid loops
-					if (routeData.route === '/404' || routeData.route === '/500') {
+					if (
+						this.routeData.route === '/404' ||
+						this.routeData.route === '/500' ||
+						this.isRewriting
+					) {
 						response.headers.set(REROUTE_DIRECTIVE_HEADER, 'no');
 					}
 					return response;
@@ -130,7 +175,13 @@ export class RenderContext {
 			}
 		};
 
-		const response = await callMiddleware(middleware, apiContext, lastNext);
+		const response = await callMiddleware(
+			middleware,
+			apiContext,
+			lastNext,
+			this.pipeline.manifest.rewritingEnabled,
+			this.pipeline.logger
+		);
 		if (response.headers.get(ROUTE_TYPE_HEADER)) {
 			response.headers.delete(ROUTE_TYPE_HEADER);
 		}
@@ -143,10 +194,38 @@ export class RenderContext {
 
 	createAPIContext(props: APIContext['props']): APIContext {
 		const renderContext = this;
-		const { cookies, params, pipeline, request, url } = this;
+		const { cookies, params, pipeline, url } = this;
 		const generator = `Astro v${ASTRO_VERSION}`;
 		const redirect = (path: string, status = 302) =>
 			new Response(null, { status, headers: { Location: path } });
+
+		const rewrite = async (reroutePayload: RewritePayload) => {
+			pipeline.logger.debug('router', 'Called rewriting to:', reroutePayload);
+			try {
+				const [routeData, component] = await pipeline.tryRewrite(reroutePayload);
+				this.routeData = routeData;
+				if (reroutePayload instanceof Request) {
+					this.request = reroutePayload;
+				} else {
+					this.request = new Request(
+						new URL(routeData.pathname ?? routeData.route, this.url.origin),
+						this.request
+					);
+				}
+				this.url = new URL(this.request.url);
+				this.cookies = new AstroCookies(this.request);
+				this.params = getParams(routeData, url.toString());
+				this.isRewriting = true;
+				return await this.render(component);
+			} catch (e) {
+				pipeline.logger.debug('router', 'Rewrite failed.', e);
+				return new Response('Not found', {
+					status: 404,
+					statusText: 'Not found',
+				});
+			}
+		};
+
 		return {
 			cookies,
 			get clientAddress() {
@@ -167,7 +246,7 @@ export class RenderContext {
 					renderContext.locals = val;
 					// we also put it on the original Request object,
 					// where the adapter might be expecting to read it after the response.
-					Reflect.set(request, clientLocalsSymbol, val);
+					Reflect.set(this.request, clientLocalsSymbol, val);
 				}
 			},
 			params,
@@ -179,7 +258,8 @@ export class RenderContext {
 			},
 			props,
 			redirect,
-			request,
+			rewrite,
+			request: this.request,
 			site: pipeline.site,
 			url,
 		};
@@ -294,11 +374,11 @@ export class RenderContext {
 		astroStaticPartial: AstroGlobalPartial
 	): Omit<AstroGlobal, 'props' | 'self' | 'slots'> {
 		const renderContext = this;
-		const { cookies, locals, params, pipeline, request, url } = this;
+		const { cookies, locals, params, pipeline, url } = this;
 		const { response } = result;
 		const redirect = (path: string, status = 302) => {
 			// If the response is already sent, error as we cannot proceed with the redirect.
-			if ((request as any)[responseSentSymbol]) {
+			if ((this.request as any)[responseSentSymbol]) {
 				throw new AstroError({
 					...AstroErrorData.ResponseSentError,
 				});
@@ -306,6 +386,33 @@ export class RenderContext {
 			return new Response(null, { status, headers: { Location: path } });
 		};
 
+		const rewrite = async (reroutePayload: RewritePayload) => {
+			try {
+				pipeline.logger.debug('router', 'Calling rewrite: ', reroutePayload);
+				const [routeData, component] = await pipeline.tryRewrite(reroutePayload);
+				this.routeData = routeData;
+				if (reroutePayload instanceof Request) {
+					this.request = reroutePayload;
+				} else {
+					this.request = new Request(
+						new URL(routeData.pathname ?? routeData.route, this.url.origin),
+						this.request
+					);
+				}
+				this.url = new URL(this.request.url);
+				this.cookies = new AstroCookies(this.request);
+				this.params = getParams(routeData, url.toString());
+				this.isRewriting = true;
+				return await this.render(component);
+			} catch (e) {
+				pipeline.logger.debug('router', 'Rerouting failed, returning a 404.', e);
+				return new Response('Not found', {
+					status: 404,
+					statusText: 'Not found',
+				});
+			}
+		};
+
 		return {
 			generator: astroStaticPartial.generator,
 			glob: astroStaticPartial.glob,
@@ -325,7 +432,8 @@ export class RenderContext {
 			},
 			locals,
 			redirect,
-			request,
+			rewrite,
+			request: this.request,
 			response,
 			site: pipeline.site,
 			url,
diff --git a/packages/astro/src/prerender/routing.ts b/packages/astro/src/prerender/routing.ts
index e6c09dd70279..cbdddff5c8cb 100644
--- a/packages/astro/src/prerender/routing.ts
+++ b/packages/astro/src/prerender/routing.ts
@@ -54,7 +54,7 @@ async function preloadAndSetPrerenderStatus({
 			continue;
 		}
 
-		const preloadedComponent = await pipeline.preload(filePath);
+		const preloadedComponent = await pipeline.preload(route, filePath);
 
 		// gets the prerender metadata set by the `astro:scanner` vite plugin
 		const prerenderStatus = getPrerenderStatus({
diff --git a/packages/astro/src/vite-plugin-astro-server/pipeline.ts b/packages/astro/src/vite-plugin-astro-server/pipeline.ts
index 7ccc63638284..685d13f570c4 100644
--- a/packages/astro/src/vite-plugin-astro-server/pipeline.ts
+++ b/packages/astro/src/vite-plugin-astro-server/pipeline.ts
@@ -1,8 +1,10 @@
-import url from 'node:url';
+import { fileURLToPath } from 'node:url';
 import type {
 	AstroSettings,
 	ComponentInstance,
 	DevToolbarMetadata,
+	ManifestData,
+	RewritePayload,
 	RouteData,
 	SSRElement,
 	SSRLoadedRenderer,
@@ -12,10 +14,10 @@ import { getInfoOutput } from '../cli/info/index.js';
 import type { HeadElements } from '../core/base-pipeline.js';
 import { ASTRO_VERSION, DEFAULT_404_COMPONENT } from '../core/constants.js';
 import { enhanceViteSSRError } from '../core/errors/dev/index.js';
-import { AggregateError, CSSError, MarkdownError } from '../core/errors/index.js';
+import { AggregateError, AstroError, CSSError, MarkdownError } from '../core/errors/index.js';
 import type { Logger } from '../core/logger/core.js';
 import type { ModuleLoader } from '../core/module-loader/index.js';
-import { Pipeline, loadRenderer } from '../core/render/index.js';
+import { loadRenderer, Pipeline } from '../core/render/index.js';
 import { isPage, isServerLikeOutput, resolveIdToUrl, viteID } from '../core/util.js';
 import { PAGE_SCRIPT_ID } from '../vite-plugin-scripts/index.js';
 import { getStylesForURL } from './css.js';
@@ -23,12 +25,20 @@ import { getComponentMetadata } from './metadata.js';
 import { createResolve } from './resolve.js';
 import { default404Page } from './response.js';
 import { getScriptsForURL } from './scripts.js';
+import { RouteNotFound } from '../core/errors/errors-data.js';
 
 export class DevPipeline extends Pipeline {
 	// renderers are loaded on every request,
 	// so it needs to be mutable here unlike in other environments
 	override renderers = new Array<SSRLoadedRenderer>();
 
+	manifestData: ManifestData | undefined;
+
+	componentInterner: WeakMap<RouteData, ComponentInstance> = new WeakMap<
+		RouteData,
+		ComponentInstance
+	>();
+
 	private constructor(
 		readonly loader: ModuleLoader,
 		readonly logger: Logger,
@@ -43,13 +53,18 @@ export class DevPipeline extends Pipeline {
 		super(logger, manifest, mode, [], resolve, serverLike, streaming);
 	}
 
-	static create({
-		loader,
-		logger,
-		manifest,
-		settings,
-	}: Pick<DevPipeline, 'loader' | 'logger' | 'manifest' | 'settings'>) {
-		return new DevPipeline(loader, logger, manifest, settings);
+	static create(
+		manifestData: ManifestData,
+		{
+			loader,
+			logger,
+			manifest,
+			settings,
+		}: Pick<DevPipeline, 'loader' | 'logger' | 'manifest' | 'settings'>
+	) {
+		const pipeline = new DevPipeline(loader, logger, manifest, settings);
+		pipeline.manifestData = manifestData;
+		return pipeline;
 	}
 
 	async headElements(routeData: RouteData): Promise<HeadElements> {
@@ -59,7 +74,7 @@ export class DevPipeline extends Pipeline {
 			mode,
 			settings,
 		} = this;
-		const filePath = new URL(`./${routeData.component}`, root);
+		const filePath = new URL(`${routeData.component}`, root);
 		// Add hoisted script tags, skip if direct rendering with `directRenderScript`
 		const { scripts } = settings.config.experimental.directRenderScript
 			? { scripts: new Set<SSRElement>() }
@@ -80,7 +95,7 @@ export class DevPipeline extends Pipeline {
 				scripts.add({ props: { type: 'module', src }, children: '' });
 
 				const additionalMetadata: DevToolbarMetadata['__astro_dev_toolbar__'] = {
-					root: url.fileURLToPath(settings.config.root),
+					root: fileURLToPath(settings.config.root),
 					version: ASTRO_VERSION,
 					latestAstroVersion: settings.latestAstroVersion,
 					debugInfo: await getInfoOutput({ userConfig: settings.config, print: false }),
@@ -131,11 +146,11 @@ export class DevPipeline extends Pipeline {
 			config: { root },
 			loader,
 		} = this;
-		const filePath = new URL(`./${routeData.component}`, root);
+		const filePath = new URL(`${routeData.component}`, root);
 		return getComponentMetadata(filePath, loader);
 	}
 
-	async preload(filePath: URL) {
+	async preload(routeData: RouteData, filePath: URL) {
 		const { loader } = this;
 		if (filePath.href === new URL(DEFAULT_404_COMPONENT, this.config.root).href) {
 			return { default: default404Page } as any as ComponentInstance;
@@ -148,7 +163,9 @@ export class DevPipeline extends Pipeline {
 
 		try {
 			// Load the module from the Vite SSR Runtime.
-			return (await loader.import(viteID(filePath))) as ComponentInstance;
+			const componentInstance = (await loader.import(viteID(filePath))) as ComponentInstance;
+			this.componentInterner.set(routeData, componentInstance);
+			return componentInstance;
 		} catch (error) {
 			// If the error came from Markdown or CSS, we already handled it and there's no need to enhance it
 			if (MarkdownError.is(error) || CSSError.is(error) || AggregateError.is(error)) {
@@ -161,5 +178,52 @@ export class DevPipeline extends Pipeline {
 
 	clearRouteCache() {
 		this.routeCache.clearAll();
+		this.componentInterner = new WeakMap<RouteData, ComponentInstance>();
+	}
+
+	async getComponentByRoute(routeData: RouteData): Promise<ComponentInstance> {
+		const component = this.componentInterner.get(routeData);
+		if (component) {
+			return component;
+		} else {
+			const filePath = new URL(`${routeData.component}`, this.config.root);
+			return await this.preload(routeData, filePath);
+		}
+	}
+
+	async tryRewrite(payload: RewritePayload): Promise<[RouteData, ComponentInstance]> {
+		let foundRoute;
+		if (!this.manifestData) {
+			throw new Error('Missing manifest data. This is an internal error, please file an issue.');
+		}
+
+		for (const route of this.manifestData.routes) {
+			if (payload instanceof URL) {
+				if (route.pattern.test(payload.pathname)) {
+					foundRoute = route;
+					break;
+				}
+			} else if (payload instanceof Request) {
+				const url = new URL(payload.url);
+				if (route.pattern.test(url.pathname)) {
+					foundRoute = route;
+					break;
+				}
+			} else if (route.pattern.test(decodeURI(payload))) {
+				foundRoute = route;
+				break;
+			}
+		}
+
+		if (foundRoute) {
+			const componentInstance = await this.getComponentByRoute(foundRoute);
+			return [foundRoute, componentInstance];
+		} else {
+			throw new AstroError(RouteNotFound);
+		}
+	}
+
+	setManifestData(manifestData: ManifestData) {
+		this.manifestData = manifestData;
 	}
 }
diff --git a/packages/astro/src/vite-plugin-astro-server/plugin.ts b/packages/astro/src/vite-plugin-astro-server/plugin.ts
index 082de6bcebf0..3c6f06ee9a05 100644
--- a/packages/astro/src/vite-plugin-astro-server/plugin.ts
+++ b/packages/astro/src/vite-plugin-astro-server/plugin.ts
@@ -35,10 +35,10 @@ export default function createVitePluginAstroServer({
 		configureServer(viteServer) {
 			const loader = createViteLoader(viteServer);
 			const manifest = createDevelopmentManifest(settings);
-			const pipeline = DevPipeline.create({ loader, logger, manifest, settings });
 			let manifestData: ManifestData = ensure404Route(
 				createRouteManifest({ settings, fsMod }, logger)
 			);
+			const pipeline = DevPipeline.create(manifestData, { loader, logger, manifest, settings });
 			const controller = createController({ loader });
 			const localStorage = new AsyncLocalStorage();
 
@@ -47,6 +47,7 @@ export default function createVitePluginAstroServer({
 				pipeline.clearRouteCache();
 				if (needsManifestRebuild) {
 					manifestData = ensure404Route(createRouteManifest({ settings }, logger));
+					pipeline.setManifestData(manifestData);
 				}
 			}
 			// Rebuild route manifest on file change, if needed.
@@ -144,6 +145,7 @@ export function createDevelopmentManifest(settings: AstroSettings): SSRManifest
 		inlinedScripts: new Map(),
 		i18n: i18nManifest,
 		checkOrigin: settings.config.experimental.security?.csrfProtection?.origin ?? false,
+		rewritingEnabled: settings.config.experimental.rewriting,
 		middleware(_, next) {
 			return next();
 		},
diff --git a/packages/astro/src/vite-plugin-astro-server/route.ts b/packages/astro/src/vite-plugin-astro-server/route.ts
index 21053420a754..85bf969f9db9 100644
--- a/packages/astro/src/vite-plugin-astro-server/route.ts
+++ b/packages/astro/src/vite-plugin-astro-server/route.ts
@@ -114,7 +114,7 @@ export async function matchRoute(
 
 	if (custom404) {
 		const filePath = new URL(`./${custom404.component}`, config.root);
-		const preloadedComponent = await pipeline.preload(filePath);
+		const preloadedComponent = await pipeline.preload(custom404, filePath);
 
 		return {
 			route: custom404,
@@ -197,40 +197,39 @@ export async function handleRoute({
 			if (!pathNameHasLocale && pathname !== '/') {
 				return handle404Response(origin, incomingRequest, incomingResponse);
 			}
-			request = createRequest({
-				base: config.base,
-				url,
-				headers: incomingRequest.headers,
-				logger,
-				// no route found, so we assume the default for rendering the 404 page
-				staticLike: config.output === 'static' || config.output === 'hybrid',
-			});
-			route = {
-				component: '',
-				generate(_data: any): string {
-					return '';
-				},
-				params: [],
-				// Disable eslint as we only want to generate an empty RegExp
-				// eslint-disable-next-line prefer-regex-literals
-				pattern: new RegExp(''),
-				prerender: false,
-				segments: [],
-				type: 'fallback',
-				route: '',
-				fallbackRoutes: [],
-				isIndex: false,
-			};
-			renderContext = RenderContext.create({
-				pipeline: pipeline,
-				pathname,
-				middleware,
-				request,
-				routeData: route,
-			});
-		} else {
-			return handle404Response(origin, incomingRequest, incomingResponse);
 		}
+		request = createRequest({
+			base: config.base,
+			url,
+			headers: incomingRequest.headers,
+			logger,
+			// no route found, so we assume the default for rendering the 404 page
+			staticLike: config.output === 'static' || config.output === 'hybrid',
+		});
+		route = {
+			component: '',
+			generate(_data: any): string {
+				return '';
+			},
+			params: [],
+			// Disable eslint as we only want to generate an empty RegExp
+			// eslint-disable-next-line prefer-regex-literals
+			pattern: new RegExp(''),
+			prerender: false,
+			segments: [],
+			type: 'fallback',
+			route: '',
+			fallbackRoutes: [],
+			isIndex: false,
+		};
+
+		renderContext = RenderContext.create({
+			pipeline: pipeline,
+			pathname,
+			middleware,
+			request,
+			routeData: route,
+		});
 	} else {
 		const filePath: URL | undefined = matchedRoute.filePath;
 		const { preloadedComponent } = matchedRoute;
diff --git a/packages/astro/test/fixtures/middleware-virtual/astro.config.mjs b/packages/astro/test/fixtures/middleware-virtual/astro.config.mjs
new file mode 100644
index 000000000000..bc095ecddb69
--- /dev/null
+++ b/packages/astro/test/fixtures/middleware-virtual/astro.config.mjs
@@ -0,0 +1,3 @@
+import { defineConfig } from "astro/config";
+
+export default defineConfig({})
diff --git a/packages/astro/test/fixtures/middleware-virtual/package.json b/packages/astro/test/fixtures/middleware-virtual/package.json
new file mode 100644
index 000000000000..7cfbeb721047
--- /dev/null
+++ b/packages/astro/test/fixtures/middleware-virtual/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/middleware-virtual",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/middleware-virtual/src/middleware.js b/packages/astro/test/fixtures/middleware-virtual/src/middleware.js
new file mode 100644
index 000000000000..55004a00cfdb
--- /dev/null
+++ b/packages/astro/test/fixtures/middleware-virtual/src/middleware.js
@@ -0,0 +1,6 @@
+import { defineMiddleware } from 'astro:middleware';
+
+export const onRequest = defineMiddleware(async (context, next) => {
+	console.log('[MIDDLEWARE] in ' + context.url.toString());
+	return next();
+});
diff --git a/packages/astro/test/fixtures/middleware-virtual/src/pages/index.astro b/packages/astro/test/fixtures/middleware-virtual/src/pages/index.astro
new file mode 100644
index 000000000000..9bd31f5fde27
--- /dev/null
+++ b/packages/astro/test/fixtures/middleware-virtual/src/pages/index.astro
@@ -0,0 +1,13 @@
+---
+const data = Astro.locals;
+---
+
+<html>
+<head>
+	<title>Index</title>
+</head>
+<body>
+
+<span>Index</span>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/astro.config.mjs b/packages/astro/test/fixtures/reroute/astro.config.mjs
new file mode 100644
index 000000000000..af13ef19b477
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/astro.config.mjs
@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	experimental: {
+		rewriting: true
+	},
+	site: "https://example.com"
+});
diff --git a/packages/astro/test/fixtures/reroute/package.json b/packages/astro/test/fixtures/reroute/package.json
new file mode 100644
index 000000000000..ed64e57a97e0
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/reroute",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/reroute/src/middleware.js b/packages/astro/test/fixtures/reroute/src/middleware.js
new file mode 100644
index 000000000000..4d7c2a7956c8
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/middleware.js
@@ -0,0 +1,33 @@
+import { sequence } from 'astro:middleware';
+
+let contextReroute = false;
+
+export const first = async (context, next) => {
+	if (context.url.pathname.includes('/auth')) {
+	}
+
+	return next();
+};
+
+export const second = async (context, next) => {
+	if (context.url.pathname.includes('/auth')) {
+		if (context.url.pathname.includes('/auth/dashboard')) {
+			contextReroute = true;
+			return await context.rewrite('/');
+		}
+		if (context.url.pathname.includes('/auth/base')) {
+			return await next('/');
+		}
+	}
+	return next();
+};
+
+export const third = async (context, next) => {
+	// just making sure that we are testing the change in context coming from `next()`
+	if (context.url.pathname.startsWith('/') && contextReroute === false) {
+		context.locals.auth = 'Third function called';
+	}
+	return next();
+};
+
+export const onRequest = sequence(first, second, third);
diff --git a/packages/astro/test/fixtures/reroute/src/pages/auth/base.astro b/packages/astro/test/fixtures/reroute/src/pages/auth/base.astro
new file mode 100644
index 000000000000..be31dfb14141
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/auth/base.astro
@@ -0,0 +1,10 @@
+---
+---
+<html>
+<head>
+	<title>Base</title>
+</head>
+<body>
+<h1>Base</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/auth/dashboard.astro b/packages/astro/test/fixtures/reroute/src/pages/auth/dashboard.astro
new file mode 100644
index 000000000000..bfa006aa01a7
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/auth/dashboard.astro
@@ -0,0 +1,10 @@
+---
+---
+<html>
+<head>
+	<title>Dashboard</title>
+</head>
+<body>
+<h1>Dashboard</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/auth/settings.astro b/packages/astro/test/fixtures/reroute/src/pages/auth/settings.astro
new file mode 100644
index 000000000000..9eee5fe95149
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/auth/settings.astro
@@ -0,0 +1,10 @@
+---
+---
+<html>
+<head>
+	<title>Settings</title>
+</head>
+<body>
+<h1>Settings</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/blog/hello/index.astro b/packages/astro/test/fixtures/reroute/src/pages/blog/hello/index.astro
new file mode 100644
index 000000000000..8c38e518a7b7
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/blog/hello/index.astro
@@ -0,0 +1,11 @@
+---
+return Astro.rewrite(new URL("../../", Astro.url))
+---
+<html>
+<head>
+	<title>Blog hello</title>
+</head>
+<body>
+<h1>Blog hello</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/blog/oops.astro b/packages/astro/test/fixtures/reroute/src/pages/blog/oops.astro
new file mode 100644
index 000000000000..df1f1f76a331
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/blog/oops.astro
@@ -0,0 +1,11 @@
+---
+return Astro.rewrite("/404")
+---
+<html>
+<head>
+	<title>Blog hello</title>
+</head>
+<body>
+<h1>Blog hello</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/blog/salut/index.astro b/packages/astro/test/fixtures/reroute/src/pages/blog/salut/index.astro
new file mode 100644
index 000000000000..89d35ce2564d
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/blog/salut/index.astro
@@ -0,0 +1,11 @@
+---
+return Astro.rewrite(new Request(new URL("../../", Astro.url)))
+---
+<html>
+<head>
+	<title>Blog hello</title>
+</head>
+<body>
+<h1>Blog hello</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/dynamic/[id].astro b/packages/astro/test/fixtures/reroute/src/pages/dynamic/[id].astro
new file mode 100644
index 000000000000..8d849de160bf
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/dynamic/[id].astro
@@ -0,0 +1,21 @@
+---
+
+export function getStaticPaths() {
+	return [
+		{ params: { id: 'hello' } },
+	];
+}
+
+
+return Astro.rewrite("/")
+
+---
+
+<html>
+<head>
+	<title>Dynamic [id].astro</title>
+</head>
+<body>
+<h1>/dynamic/[id].astro</h1>
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/index.astro b/packages/astro/test/fixtures/reroute/src/pages/index.astro
new file mode 100644
index 000000000000..91a6fd0fb0fc
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+const auth = Astro.locals.auth;
+---
+<html>
+	<head>
+		<title>Index</title>
+	</head>
+	<body>
+		<h1>Index</h1>
+		{auth ? <p>Called auth</p>: ""}
+	</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/reroute.astro b/packages/astro/test/fixtures/reroute/src/pages/reroute.astro
new file mode 100644
index 000000000000..dbc7a6ae628a
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/reroute.astro
@@ -0,0 +1,11 @@
+---
+return Astro.rewrite("/")
+---
+<html>
+	<head>
+		<title>Reroute</title>
+	</head>
+	<body>
+		<h1>Reroute</h1>
+	</body>
+</html>
diff --git a/packages/astro/test/fixtures/reroute/src/pages/spread/[...id].astro b/packages/astro/test/fixtures/reroute/src/pages/spread/[...id].astro
new file mode 100644
index 000000000000..0bab88d0f7b1
--- /dev/null
+++ b/packages/astro/test/fixtures/reroute/src/pages/spread/[...id].astro
@@ -0,0 +1,20 @@
+---
+export function getStaticPaths() {
+	return [
+		{ params: { id: 'hello' } },
+	];
+}
+
+return Astro.rewrite("/")
+
+---
+
+
+<html>
+<head>
+	<title>Spread [...id].astro</title>
+</head>
+<body>
+<h1>/spread/[...id].astro</h1>
+</body>
+</html>
diff --git a/packages/astro/test/i18n-routing-manual.test.js b/packages/astro/test/i18n-routing-manual.test.js
index d664b3797889..1feaf963348c 100644
--- a/packages/astro/test/i18n-routing-manual.test.js
+++ b/packages/astro/test/i18n-routing-manual.test.js
@@ -58,8 +58,6 @@ describe('Dev server manual routing', () => {
 describe('SSG manual routing', () => {
 	/** @type {import('./test-utils').Fixture} */
 	let fixture;
-	/** @type {import('./test-utils').DevServer} */
-	let devServer;
 
 	before(async () => {
 		fixture = await loadFixture({
diff --git a/packages/astro/test/rewrite.test.js b/packages/astro/test/rewrite.test.js
new file mode 100644
index 000000000000..39ff084a4c80
--- /dev/null
+++ b/packages/astro/test/rewrite.test.js
@@ -0,0 +1,223 @@
+import { describe, it, before, after } from 'node:test';
+import { loadFixture } from './test-utils.js';
+import { load as cheerioLoad } from 'cheerio';
+import assert from 'node:assert/strict';
+import testAdapter from './test-adapter.js';
+
+describe('Dev reroute', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+	let devServer;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/reroute/',
+		});
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	it('should render the index page when navigating /reroute ', async () => {
+		const html = await fixture.fetch('/reroute').then((res) => res.text());
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating /blog/hello ', async () => {
+		const html = await fixture.fetch('/blog/hello').then((res) => res.text());
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating /blog/salut ', async () => {
+		const html = await fixture.fetch('/blog/salut').then((res) => res.text());
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating dynamic route /dynamic/[id] ', async () => {
+		const html = await fixture.fetch('/dynamic/hello').then((res) => res.text());
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating spread route /spread/[...spread] ', async () => {
+		const html = await fixture.fetch('/spread/hello').then((res) => res.text());
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the 404 built-in page', async () => {
+		const html = await fixture.fetch('/blog/oops').then((res) => res.text());
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), '404:  Not found');
+	});
+});
+
+describe('Build reroute', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/reroute/',
+		});
+		await fixture.build();
+	});
+
+	it('should render the index page when navigating /reroute ', async () => {
+		const html = await fixture.readFile('/reroute/index.html');
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating /blog/hello ', async () => {
+		const html = await fixture.readFile('/blog/hello/index.html');
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating /blog/salut ', async () => {
+		const html = await fixture.readFile('/blog/salut/index.html');
+
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating dynamic route /dynamic/[id] ', async () => {
+		const html = await fixture.readFile('/dynamic/hello/index.html');
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating spread route /spread/[...spread] ', async () => {
+		const html = await fixture.readFile('/spread/hello/index.html');
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the 404 built-in page', async () => {
+		try {
+			const html = await fixture.readFile('/spread/oops/index.html');
+			assert.fail('Not found');
+		} catch {
+			assert.ok;
+		}
+	});
+});
+
+describe('SSR reroute', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+	let app;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/reroute/',
+			output: 'server',
+			adapter: testAdapter(),
+		});
+		await fixture.build();
+		app = await fixture.loadTestAdapterApp();
+	});
+
+	it('should render the index page when navigating /reroute ', async () => {
+		const request = new Request('http://example.com/reroute');
+		const response = await app.render(request);
+		const html = await response.text();
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating /blog/hello ', async () => {
+		const request = new Request('http://example.com/blog/hello');
+		const response = await app.render(request);
+		const html = await response.text();
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating /blog/salut ', async () => {
+		const request = new Request('http://example.com/blog/salut');
+		const response = await app.render(request);
+		const html = await response.text();
+
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating dynamic route /dynamic/[id] ', async () => {
+		const request = new Request('http://example.com/dynamic/hello');
+		const response = await app.render(request);
+		const html = await response.text();
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the index page when navigating spread route /spread/[...spread] ', async () => {
+		const request = new Request('http://example.com/spread/hello');
+		const response = await app.render(request);
+		const html = await response.text();
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+	});
+
+	it('should render the 404 built-in page', async () => {
+		const request = new Request('http://example.com/blog/oops');
+		const response = await app.render(request);
+		const html = await response.text();
+		assert.equal(html, 'Not found');
+	});
+});
+
+describe('Middleware', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+	let devServer;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/reroute/',
+		});
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	it('should render a locals populated in the third middleware function, because we use next("/")', async () => {
+		const html = await fixture.fetch('/auth/base').then((res) => res.text());
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+		assert.equal($('p').text(), 'Called auth');
+	});
+
+	it('should NOT render locals populated in the third middleware function, because we use ctx.reroute("/")', async () => {
+		const html = await fixture.fetch('/auth/dashboard').then((res) => res.text());
+		const $ = cheerioLoad(html);
+
+		assert.equal($('h1').text(), 'Index');
+		assert.equal($('p').text(), '');
+	});
+});
diff --git a/packages/astro/test/units/routing/route-matching.test.js b/packages/astro/test/units/routing/route-matching.test.js
index b2f27d8c9f80..5eafa6c80aea 100644
--- a/packages/astro/test/units/routing/route-matching.test.js
+++ b/packages/astro/test/units/routing/route-matching.test.js
@@ -146,7 +146,7 @@ describe('Route matching', () => {
 
 		const loader = createViteLoader(container.viteServer);
 		const manifest = createDevelopmentManifest(container.settings);
-		pipeline = DevPipeline.create({ loader, logger: defaultLogger, manifest, settings });
+		pipeline = DevPipeline.create(undefined, { loader, logger: defaultLogger, manifest, settings });
 		manifestData = createRouteManifest(
 			{
 				cwd: fileURLToPath(root),
diff --git a/packages/astro/test/units/vite-plugin-astro-server/request.test.js b/packages/astro/test/units/vite-plugin-astro-server/request.test.js
index 7ea587f97e2f..f976a9d30b50 100644
--- a/packages/astro/test/units/vite-plugin-astro-server/request.test.js
+++ b/packages/astro/test/units/vite-plugin-astro-server/request.test.js
@@ -22,7 +22,7 @@ async function createDevPipeline(overrides = {}) {
 	const loader = overrides.loader ?? createLoader();
 	const manifest = createDevelopmentManifest(settings);
 
-	return DevPipeline.create({ loader, logger: defaultLogger, manifest, settings });
+	return DevPipeline.create(undefined, { loader, logger: defaultLogger, manifest, settings });
 }
 
 describe('vite-plugin-astro-server', () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 43aa94a54d14..98b0868de4b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3126,6 +3126,12 @@ importers:
         specifier: workspace:*
         version: link:../../..
 
+  packages/astro/test/fixtures/middleware-virtual:
+    dependencies:
+      astro:
+        specifier: workspace:*
+        version: link:../../..
+
   packages/astro/test/fixtures/minification-html:
     dependencies:
       astro:
@@ -3324,6 +3330,12 @@ importers:
         specifier: workspace:*
         version: link:../../..
 
+  packages/astro/test/fixtures/reroute:
+    dependencies:
+      astro:
+        specifier: workspace:*
+        version: link:../../..
+
   packages/astro/test/fixtures/root-srcdir-css:
     dependencies:
       astro:

From 4436398642d03695220b594e0b2a1b751a9b972c Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <ematipico@users.noreply.github.com>
Date: Wed, 8 May 2024 09:27:28 +0000
Subject: [PATCH 7/7] [ci] format

---
 packages/astro/src/core/app/pipeline.ts                 | 6 +++---
 packages/astro/src/core/build/pipeline.ts               | 8 ++++----
 packages/astro/src/core/middleware/index.ts             | 2 +-
 packages/astro/src/core/middleware/sequence.ts          | 2 +-
 packages/astro/src/vite-plugin-astro-server/pipeline.ts | 4 ++--
 packages/astro/test/rewrite.test.js                     | 6 +++---
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/astro/src/core/app/pipeline.ts b/packages/astro/src/core/app/pipeline.ts
index 77d2f80b24f2..f62dc84ed983 100644
--- a/packages/astro/src/core/app/pipeline.ts
+++ b/packages/astro/src/core/app/pipeline.ts
@@ -1,16 +1,16 @@
 import type {
+	ComponentInstance,
 	ManifestData,
+	RewritePayload,
 	RouteData,
 	SSRElement,
 	SSRResult,
-	ComponentInstance,
-	RewritePayload,
 } from '../../@types/astro.js';
 import { Pipeline } from '../base-pipeline.js';
+import type { SinglePageBuiltModule } from '../build/types.js';
 import { DEFAULT_404_COMPONENT } from '../constants.js';
 import { RedirectSinglePageBuiltModule } from '../redirects/component.js';
 import { createModuleScriptElement, createStylesheetElementSet } from '../render/ssr-element.js';
-import type { SinglePageBuiltModule } from '../build/types.js';
 
 export class AppPipeline extends Pipeline {
 	#manifestData: ManifestData | undefined;
diff --git a/packages/astro/src/core/build/pipeline.ts b/packages/astro/src/core/build/pipeline.ts
index 532759f1e426..daae6940e046 100644
--- a/packages/astro/src/core/build/pipeline.ts
+++ b/packages/astro/src/core/build/pipeline.ts
@@ -8,7 +8,10 @@ import type {
 import { getOutputDirectory } from '../../prerender/utils.js';
 import { BEFORE_HYDRATION_SCRIPT_ID, PAGE_SCRIPT_ID } from '../../vite-plugin-scripts/index.js';
 import type { SSRManifest } from '../app/types.js';
+import { RouteNotFound } from '../errors/errors-data.js';
+import { AstroError } from '../errors/index.js';
 import { routeIsFallback, routeIsRedirect } from '../redirects/helpers.js';
+import { RedirectSinglePageBuiltModule } from '../redirects/index.js';
 import { Pipeline } from '../render/index.js';
 import {
 	createAssetLink,
@@ -16,6 +19,7 @@ import {
 	createStylesheetElementSet,
 } from '../render/ssr-element.js';
 import { isServerLikeOutput } from '../util.js';
+import { getOutDirWithinCwd } from './common.js';
 import {
 	type BuildInternals,
 	cssOrder,
@@ -31,10 +35,6 @@ import {
 } from './plugins/util.js';
 import type { PageBuildData, SinglePageBuiltModule, StaticBuildOptions } from './types.js';
 import { i18nHasFallback } from './util.js';
-import { RedirectSinglePageBuiltModule } from '../redirects/index.js';
-import { getOutDirWithinCwd } from './common.js';
-import { RouteNotFound } from '../errors/errors-data.js';
-import { AstroError } from '../errors/index.js';
 
 /**
  * The build pipeline is responsible to gather the files emitted by the SSR build and generate the pages by executing these files.
diff --git a/packages/astro/src/core/middleware/index.ts b/packages/astro/src/core/middleware/index.ts
index 17c206d6e9f5..358cf31fe6f3 100644
--- a/packages/astro/src/core/middleware/index.ts
+++ b/packages/astro/src/core/middleware/index.ts
@@ -4,7 +4,7 @@ import {
 	computePreferredLocale,
 	computePreferredLocaleList,
 } from '../../i18n/utils.js';
-import { ASTRO_VERSION, clientLocalsSymbol, clientAddressSymbol } from '../constants.js';
+import { ASTRO_VERSION, clientAddressSymbol, clientLocalsSymbol } from '../constants.js';
 import { AstroCookies } from '../cookies/index.js';
 import { AstroError, AstroErrorData } from '../errors/index.js';
 import { sequence } from './sequence.js';
diff --git a/packages/astro/src/core/middleware/sequence.ts b/packages/astro/src/core/middleware/sequence.ts
index ef27d03c2cb4..8b2c2b49c572 100644
--- a/packages/astro/src/core/middleware/sequence.ts
+++ b/packages/astro/src/core/middleware/sequence.ts
@@ -1,6 +1,6 @@
 import type { APIContext, MiddlewareHandler, RewritePayload } from '../../@types/astro.js';
-import { defineMiddleware } from './index.js';
 import { AstroCookies } from '../cookies/cookies.js';
+import { defineMiddleware } from './index.js';
 
 // From SvelteKit: https://github.com/sveltejs/kit/blob/master/packages/kit/src/exports/hooks/sequence.js
 /**
diff --git a/packages/astro/src/vite-plugin-astro-server/pipeline.ts b/packages/astro/src/vite-plugin-astro-server/pipeline.ts
index 685d13f570c4..797c5d29abdd 100644
--- a/packages/astro/src/vite-plugin-astro-server/pipeline.ts
+++ b/packages/astro/src/vite-plugin-astro-server/pipeline.ts
@@ -14,10 +14,11 @@ import { getInfoOutput } from '../cli/info/index.js';
 import type { HeadElements } from '../core/base-pipeline.js';
 import { ASTRO_VERSION, DEFAULT_404_COMPONENT } from '../core/constants.js';
 import { enhanceViteSSRError } from '../core/errors/dev/index.js';
+import { RouteNotFound } from '../core/errors/errors-data.js';
 import { AggregateError, AstroError, CSSError, MarkdownError } from '../core/errors/index.js';
 import type { Logger } from '../core/logger/core.js';
 import type { ModuleLoader } from '../core/module-loader/index.js';
-import { loadRenderer, Pipeline } from '../core/render/index.js';
+import { Pipeline, loadRenderer } from '../core/render/index.js';
 import { isPage, isServerLikeOutput, resolveIdToUrl, viteID } from '../core/util.js';
 import { PAGE_SCRIPT_ID } from '../vite-plugin-scripts/index.js';
 import { getStylesForURL } from './css.js';
@@ -25,7 +26,6 @@ import { getComponentMetadata } from './metadata.js';
 import { createResolve } from './resolve.js';
 import { default404Page } from './response.js';
 import { getScriptsForURL } from './scripts.js';
-import { RouteNotFound } from '../core/errors/errors-data.js';
 
 export class DevPipeline extends Pipeline {
 	// renderers are loaded on every request,
diff --git a/packages/astro/test/rewrite.test.js b/packages/astro/test/rewrite.test.js
index 39ff084a4c80..1c76ce10af74 100644
--- a/packages/astro/test/rewrite.test.js
+++ b/packages/astro/test/rewrite.test.js
@@ -1,8 +1,8 @@
-import { describe, it, before, after } from 'node:test';
-import { loadFixture } from './test-utils.js';
-import { load as cheerioLoad } from 'cheerio';
 import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { load as cheerioLoad } from 'cheerio';
 import testAdapter from './test-adapter.js';
+import { loadFixture } from './test-utils.js';
 
 describe('Dev reroute', () => {
 	/** @type {import('./test-utils').Fixture} */