Fix for checking media type in CSR

.changeset/sixty-beds-give.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+bugfix checking media-type in client-side router

packages/astro/components/ViewTransitions.astro

@@ -65,19 +65,19 @@ const { fallback = 'animate' } = Astro.props as Props;
 	};
 
 	async function getHTML(href: string) {
-		let res;
 		try {
-			res = await fetch(href);
+			const res = await fetch(href);
+			const html = await res.text();
+			return {
+				ok: res.ok,
+				html,
+				redirected: res.redirected ? res.url : undefined,
+				// drop potential charset (+ other name/value pairs) as parser needs the mediaType
+				mediaType: res.headers.get('content-type')?.replace(/;.*/, ''),
+			};
 		} catch (err) {
 			return { ok: false };
 		}
-		const html = await res.text();
-		return {
-			ok: res.ok,
-			html,
-			redirected: res.redirected ? res.url : undefined,
-			contentType: res.headers.get('content-type'),
-		};
 	}
 
 	function getFallback(): Fallback {
@@ -290,16 +290,16 @@ const { fallback = 'animate' } = Astro.props as Props;
 	async function navigate(dir: Direction, loc: URL, state?: State) {
 		let finished: Promise<void>;
 		const href = loc.href;
-		const { html, ok, contentType, redirected } = await getHTML(href);
+		const { html, ok, mediaType, redirected } = await getHTML(href);
 		// if there was a redirection, show the final URL in the browser's address bar
 		redirected && (loc = new URL(redirected));
 		// If there is a problem fetching the new page, just do an MPA navigation to it.
-		if (!ok || contentType !== 'text/html') {
+		if (!ok || !(mediaType === 'text/html' || mediaType === 'application/xhtml+xml')) {
 			location.href = href;
 			return;
 		}
 
-		const doc = parser.parseFromString(html, contentType);
+		const doc = parser.parseFromString(html, mediaType);
 		if (!doc.querySelector('[name="astro-view-transitions-enabled"]')) {
 			location.href = href;
 			return;