[@astrojs/prefetch]: Prevent prefetching current page (#5009)

* Check that removal of url.hash breaks no tests

* test if status-quo is as expected

* Adapt tests to fail

* Adapt the shouldPreload function to skip same path

* Add changeset

.changeset/cold-colts-laugh.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/prefetch': patch
+---
+
+Prevents prefetching the current page

packages/integrations/prefetch/src/client.ts

@@ -11,7 +11,7 @@ function shouldPreload({ href }: { href: string }) {
 		const url = new URL(href);
 		return (
 			window.location.origin === url.origin &&
-			window.location.pathname !== url.hash &&
+			window.location.pathname !== url.pathname &&
 			!preloaded.has(href)
 		);
 	} catch {}

packages/integrations/prefetch/test/basic-prefetch.test.js

@@ -17,23 +17,24 @@ test.describe('Basic prefetch', () => {
 
 		test.describe('prefetches rel="prefetch" links', () => {
 			test('skips /admin', async ({ page, astro }) => {
-				const requests = new Set();
+				const requests = [];
 
-				page.on('request', async (request) => requests.add(request.url()));
+				page.on('request', async (request) => requests.push(request.url()));
 
 				await page.goto(astro.resolveUrl('/'));
 
 				await page.waitForLoadState('networkidle');
 
-				await expect(
-					requests.has(astro.resolveUrl('/about')),
-					'/about was prefetched'
-				).toBeTruthy();
-				await expect(
-					requests.has(astro.resolveUrl('/contact')),
+				expect(requests.includes(astro.resolveUrl('/about')), '/about was prefetched').toBeTruthy();
+				expect(
+					requests.includes(astro.resolveUrl('/contact')),
 					'/contact was prefetched'
 				).toBeTruthy();
-				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+				expect(requests.includes(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+				expect(
+					requests.filter((r) => r === astro.resolveUrl('/')).length === 1,
+					'/ was skipped by prefetch and only queried once'
+				).toBeTruthy();
 			});
 		});
 	});
@@ -53,23 +54,24 @@ test.describe('Basic prefetch', () => {
 
 		test.describe('prefetches rel="prefetch" links', () => {
 			test('skips /admin', async ({ page, astro }) => {
-				const requests = new Set();
+				const requests = [];
 
-				page.on('request', async (request) => requests.add(request.url()));
+				page.on('request', async (request) => requests.push(request.url()));
 
 				await page.goto(astro.resolveUrl('/'));
 
 				await page.waitForLoadState('networkidle');
 
-				await expect(
-					requests.has(astro.resolveUrl('/about')),
-					'/about was prefetched'
-				).toBeTruthy();
-				await expect(
-					requests.has(astro.resolveUrl('/contact')),
+				expect(requests.includes(astro.resolveUrl('/about')), '/about was prefetched').toBeTruthy();
+				expect(
+					requests.includes(astro.resolveUrl('/contact')),
 					'/contact was prefetched'
 				).toBeTruthy();
-				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+				expect(requests.includes(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+				expect(
+					requests.filter((r) => r === astro.resolveUrl('/')).length === 1,
+					'/ was skipped by prefetch and only queried once'
+				).toBeTruthy();
 			});
 		});
 	});

packages/integrations/prefetch/test/custom-selectors.test.js

@@ -25,20 +25,24 @@ test.describe('Custom prefetch selectors', () => {
 
 		test.describe('prefetches links by custom selector', () => {
 			test('only prefetches /contact', async ({ page, astro }) => {
-				const requests = new Set();
+				const requests = [];
 
-				page.on('request', async (request) => requests.add(request.url()));
+				page.on('request', async (request) => requests.push(request.url()));
 
 				await page.goto(astro.resolveUrl('/'));
 
 				await page.waitForLoadState('networkidle');
 
-				await expect(requests.has(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
-				await expect(
-					requests.has(astro.resolveUrl('/contact')),
+				expect(requests.includes(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
+				expect(
+					requests.includes(astro.resolveUrl('/contact')),
 					'/contact was prefetched'
 				).toBeTruthy();
-				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+				expect(requests.includes(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+				expect(
+					requests.filter((r) => r === astro.resolveUrl('/')).length === 1,
+					'/ was skipped by prefetch and only queried once'
+				).toBeTruthy();
 			});
 		});
 	});
@@ -58,20 +62,24 @@ test.describe('Custom prefetch selectors', () => {
 
 		test.describe('prefetches links by custom selector', () => {
 			test('only prefetches /contact', async ({ page, astro }) => {
-				const requests = new Set();
+				const requests = [];
 
-				page.on('request', async (request) => requests.add(request.url()));
+				page.on('request', async (request) => requests.push(request.url()));
 
 				await page.goto(astro.resolveUrl('/'));
 
 				await page.waitForLoadState('networkidle');
 
-				await expect(requests.has(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
-				await expect(
-					requests.has(astro.resolveUrl('/contact')),
+				expect(requests.includes(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
+				expect(
+					requests.includes(astro.resolveUrl('/contact')),
 					'/contact was prefetched'
 				).toBeTruthy();
-				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+				expect(requests.includes(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+				expect(
+					requests.filter((r) => r === astro.resolveUrl('/')).length === 1,
+					'/ was skipped by prefetch and only queried once'
+				).toBeTruthy();
 			});
 		});
 	});

packages/integrations/prefetch/test/fixtures/basic-prefetch/src/pages/index.astro

@@ -10,6 +10,9 @@
 
 	<nav>
 		<ul>
+			<li>
+				<a href="/" rel="prefetch">Home</a>
+			</li>
 			<li>
 				<a href="/about" rel="prefetch">About</a>
 			</li>