experimental prefetching on hover for common links

app/notes/[slug]/counter.tsx

@@ -4,6 +4,7 @@ import CountUp from "../../../components/CountUp";
 import redis from "../../../lib/redis";
 
 const HitCounter = async ({ slug }: { slug: string }) => {
+  // ensure this component isn't triggered by prerenders and/or preloads
   await connection();
 
   try {

app/notes/[slug]/page.tsx

@@ -125,7 +125,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
           className={styles.metaItem}
           style={{
             // fix potential layout shift when number of hits loads
-            minWidth: "7em",
+            minWidth: "6em",
             marginRight: 0,
           }}
         >

app/notes/page.tsx

@@ -40,7 +40,11 @@ const Page = async () => {
             <li className={styles.post} key={slug}>
               <Time date={date} format="MMM d" className={styles.date} />
               <span>
-                <Link href={`/${POSTS_DIR}/${slug}`} dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
+                <Link
+                  dynamicOnHover
+                  href={`/${POSTS_DIR}/${slug}`}
+                  dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
+                />
               </span>
             </li>
           ))}