fix: links with same path but different search params not prefetched (#…

…9189)

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

.changeset/brown-jars-lick.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue where links with the same pathname as the current page, but different search params, were not prefetched.

packages/astro/e2e/fixtures/prefetch/src/pages/index.astro

@@ -9,6 +9,8 @@
     <br>
     <a id="prefetch-false" href="/prefetch-false" data-astro-prefetch="false">false</a>
     <br>
+    <a id="prefetch-search-param" href="?search-param=true" data-astro-prefetch="hover">search param</a>
+    <br>
     <a id="prefetch-tap" href="/prefetch-tap" data-astro-prefetch="tap">tap</a>
     <br>
     <a id="prefetch-hover" href="/prefetch-hover" data-astro-prefetch="hover">hover</a>

packages/astro/e2e/prefetch.test.js

@@ -16,7 +16,8 @@ test.describe('Prefetch (default)', () => {
 
 	test.beforeEach(async ({ page }) => {
 		page.on('request', (req) => {
-			reqUrls.push(new URL(req.url()).pathname);
+			const urlObj = new URL(req.url());
+			reqUrls.push(urlObj.pathname + urlObj.search);
 		});
 	});
 
@@ -38,6 +39,16 @@ test.describe('Prefetch (default)', () => {
 		expect(reqUrls).not.toContainEqual('/prefetch-false');
 	});
 
+	test('Link with search param should prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/?search-param=true');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-search-param').hover(),
+		]);
+		expect(reqUrls).toContainEqual('/?search-param=true');
+	});
+
 	test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 		expect(reqUrls).not.toContainEqual('/prefetch-tap');
@@ -102,7 +113,8 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'tap')", () => {
 
 	test.beforeEach(async ({ page }) => {
 		page.on('request', (req) => {
-			reqUrls.push(new URL(req.url()).pathname);
+			const urlObj = new URL(req.url());
+			reqUrls.push(urlObj.pathname + urlObj.search);
 		});
 	});
 
@@ -129,6 +141,16 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'tap')", () => {
 		expect(reqUrls).not.toContainEqual('/prefetch-false');
 	});
 
+	test('Link with search param should prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/?search-param=true');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-search-param').hover(),
+		]);
+		expect(reqUrls).toContainEqual('/?search-param=true');
+	});
+
 	test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 		expect(reqUrls).not.toContainEqual('/prefetch-tap');

packages/astro/src/prefetch/index.ts

@@ -226,7 +226,7 @@ function canPrefetchUrl(url: string, ignoreSlowConnection: boolean) {
 		const urlObj = new URL(url, location.href);
 		return (
 			location.origin === urlObj.origin &&
-			location.pathname !== urlObj.pathname &&
+			(location.pathname !== urlObj.pathname || location.search !== urlObj.search) &&
 			!prefetchedUrls.has(url)
 		);
 	} catch {}