feat: add prefetch for pagination pages

astro.config.mjs

@@ -3,24 +3,22 @@ import preact from '@astrojs/preact';
 import tailwind from '@astrojs/tailwind';
 import { astroImageTools } from 'astro-imagetools';
 import { remarkReadingTime, remarkWidont } from './src/utils';
-
 import { defineConfig } from 'astro/config';
 
+import prefetch from "@astrojs/prefetch";
+
 // https://astro.build/config
 export default defineConfig({
-	markdown: {
-		shikiConfig: {
-			theme: 'nord',
-			langs: [],
-			wrap: true,
-		},
-	},
-	integrations: [
-		mdx({
-			remarkPlugins: [remarkReadingTime, remarkWidont],
-		}),
-		tailwind(),
-		preact({ compat: true }),
-		astroImageTools,
-	],
-});
+  markdown: {
+    shikiConfig: {
+      theme: 'nord',
+      langs: [],
+      wrap: true
+    }
+  },
+  integrations: [mdx({
+    remarkPlugins: [remarkReadingTime, remarkWidont]
+  }), tailwind(), preact({
+    compat: true
+  }), astroImageTools, prefetch()]
+});

package.json

@@ -19,6 +19,7 @@
 		"@astro-community/astro-embed-youtube": "^0.2.2",
 		"@astrojs/mdx": "^0.19.4",
 		"@astrojs/preact": "^2.2.0",
+		"@astrojs/prefetch": "^0.2.3",
 		"@astrojs/tailwind": "^3.1.3",
 		"astro": "^2.5.5",
 		"astro-icon": "^0.8.0",

pnpm-lock.yaml

@@ -18,6 +18,9 @@ dependencies:
   '@astrojs/preact':
     specifier: ^2.2.0
     version: 2.2.0(preact@10.15.1)
+  '@astrojs/prefetch':
+    specifier: ^0.2.3
+    version: 0.2.3
   '@astrojs/tailwind':
     specifier: ^3.1.3
     version: 3.1.3(astro@2.5.5)(tailwindcss@3.3.2)
@@ -280,6 +283,12 @@ packages:
       - supports-color
     dev: false
 
+  /@astrojs/prefetch@0.2.3:
+    resolution: {integrity: sha512-r51t4fkGcePA6FHFVDD5vC/whhoKWFSaKNug/4Z2FSKZZga9yjb2qDcrul7u32nVDN+30ywZ/RQAmBMrHOmLiw==}
+    dependencies:
+      throttles: 1.0.1
+    dev: false
+
   /@astrojs/prism@2.1.2:
     resolution: {integrity: sha512-3antim1gb34689GHRQFJ88JEo93HuZKQBnmxDT5W/nxiNz1p/iRxnCTEhIbJhqMOTRbbo5h2ldm5qSxx+TMFQA==}
     engines: {node: '>=16.12.0'}
@@ -12279,6 +12288,11 @@ packages:
       real-require: 0.2.0
     dev: true
 
+  /throttles@1.0.1:
+    resolution: {integrity: sha512-fab7Xg+zELr9KOv4fkaBoe/b3L0GMGLd0IBSCn16GoE/Qx6/OfCr1eGNyEcDU2pUA79qQfZ8kPQWlRuok4YwTw==}
+    engines: {node: '>=6'}
+    dev: false
+
   /through2-filter@3.0.0:
     resolution: {integrity: sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==}
     dependencies:

src/components/Pagination.astro

@@ -17,7 +17,7 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
 			aria-label={previousText || 'Previous'}
 			class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-start-[1rem]"
 			href={previousUrl}
-			rel="prev"
+			rel="prefetch prev"
 			title={previousText || 'Previous'}
 		>
 			<div class="pagination flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-[50%] bg-black/5 outline-none transition-opacity duration-500 ease-in-out group-hover:bg-black/20 group-focus:bg-black/20 dark:bg-white/5 dark:group-hover:bg-white/20 dark:group-focus:bg-white/20">
@@ -32,7 +32,7 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
 			aria-label={nextText || 'Next'}
 			class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-end-[1rem]"
 			href={nextUrl}
-			rel="next"
+			rel="prefetch next"
 			title={nextText || 'Next'}
 		>
 			<div class="pagination flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-[50%] bg-black/5 outline-none transition-opacity duration-500 ease-in-out group-hover:bg-black/20 group-focus:bg-black/20 dark:bg-white/5 dark:group-hover:bg-white/20 dark:group-focus:bg-white/20">