From cfe77f98d627995f2e1320cf0ddc248b90f405f0 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Tue, 15 Apr 2025 09:30:20 -0400
Subject: [PATCH] experimental prefetching on hover for common links

---
 app/notes/[slug]/counter.tsx     |  1 +
 app/notes/[slug]/page.tsx        |  2 +-
 app/notes/page.tsx               |  6 +++-
 components/Header/Header.tsx     |  2 +-
 components/Link/Link.tsx         | 12 +++++--
 components/MenuItem/MenuItem.tsx |  1 +
 lib/env.ts                       |  2 +-
 next.config.ts                   |  1 +
 package.json                     |  2 +-
 pnpm-lock.yaml                   | 58 ++++++++++++++++----------------
 10 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/app/notes/[slug]/counter.tsx b/app/notes/[slug]/counter.tsx
index becf840f..bda16661 100644
--- a/app/notes/[slug]/counter.tsx
+++ b/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 {
diff --git a/app/notes/[slug]/page.tsx b/app/notes/[slug]/page.tsx
index 8288d20d..6a61fd40 100644
--- a/app/notes/[slug]/page.tsx
+++ b/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,
           }}
         >
diff --git a/app/notes/page.tsx b/app/notes/page.tsx
index c0ccac52..20a7796a 100644
--- a/app/notes/page.tsx
+++ b/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>
           ))}
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index 734a9f8d..950c457d 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -15,7 +15,7 @@ const Header = ({ className, ...rest }: HeaderProps) => {
   return (
     <header className={clsx(styles.header, className)} {...rest}>
       <nav className={styles.nav}>
-        <Link href="/" rel="author" aria-label={config.authorName} plain className={styles.home}>
+        <Link dynamicOnHover href="/" rel="author" aria-label={config.authorName} plain className={styles.home}>
           <Image
             src={avatarImg}
             alt={`Photo of ${config.authorName}`}
diff --git a/components/Link/Link.tsx b/components/Link/Link.tsx
index 2dd731e1..54cb39e2 100644
--- a/components/Link/Link.tsx
+++ b/components/Link/Link.tsx
@@ -5,18 +5,24 @@ import type { ComponentPropsWithoutRef } from "react";
 import styles from "./Link.module.css";
 
 export type LinkProps = ComponentPropsWithoutRef<typeof NextLink> & {
-  plain?: boolean; // disable fancy text-decoration effect
+  /** Disables fancy text-decoration effect when true. */
+  plain?: boolean;
+
+  // https://github.com/vercel/next.js/pull/77866/files#diff-040f76a8f302dd3a8ec7de0867048475271f052b094cd73d2d0751b495c02f7dR30
+  dynamicOnHover?: boolean;
 };
 
-const Link = ({ href, rel, target, prefetch = false, plain, className, ...rest }: LinkProps) => {
+const Link = ({ href, rel, target, prefetch = false, dynamicOnHover, plain, className, ...rest }: LinkProps) => {
   // This component auto-detects whether or not this link should open in the same window (the default for internal
   // links) or a new tab (the default for external links). Defaults can be overridden with `target="_blank"`.
   const isExternal = typeof href === "string" && !["/", "#"].includes(href[0]);
 
   return (
     <NextLink
+      prefetch={dynamicOnHover ? null : prefetch}
+      // @ts-expect-error
+      unstable_dynamicOnHover={dynamicOnHover}
       href={href}
-      prefetch={prefetch}
       target={target || (isExternal ? "_blank" : undefined)}
       rel={`${rel ? `${rel} ` : ""}${target === "_blank" || isExternal ? "noopener noreferrer" : ""}` || undefined}
       className={clsx(
diff --git a/components/MenuItem/MenuItem.tsx b/components/MenuItem/MenuItem.tsx
index 06c21631..b68bb104 100644
--- a/components/MenuItem/MenuItem.tsx
+++ b/components/MenuItem/MenuItem.tsx
@@ -26,6 +26,7 @@ const MenuItem = ({ text, href, icon, current, className, ...rest }: MenuItemPro
   if (href) {
     return (
       <Link
+        dynamicOnHover
         href={href}
         aria-label={text}
         plain
diff --git a/lib/env.ts b/lib/env.ts
index c81e7fa9..d3264e83 100644
--- a/lib/env.ts
+++ b/lib/env.ts
@@ -94,7 +94,7 @@ export const env = createEnv({
     /**
      * Optional. Locale code to define the site's language in ISO-639 format. Defaults to `en-US`.
      *
-     * @see https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes#Table
+     * @see https://www.loc.gov/standards/iso639-2/php/code_list.php
      */
     NEXT_PUBLIC_SITE_LOCALE: v.optional(v.string(), "en-US"),
 
diff --git a/next.config.ts b/next.config.ts
index 35930665..5bfcc8aa 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -45,6 +45,7 @@ const nextConfig: NextConfig = {
   experimental: {
     reactCompiler: true, // https://react.dev/learn/react-compiler
     ppr: "incremental", // https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering#using-partial-prerendering
+    dynamicOnHover: true,
     scrollRestoration: true,
     serverActions: {
       allowedOrigins: ["jarv.is", "jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion"],
diff --git a/package.json b/package.json
index 359860bf..f500c88e 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@types/mdx": "^2.0.13",
     "@types/node": "^22.14.1",
     "@types/prop-types": "^15.7.14",
-    "@types/react": "^19.1.1",
+    "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@types/react-is": "^19.0.0",
     "babel-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd39a014..eb958e11 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,13 +25,13 @@ importers:
         version: 3.1.0(acorn@8.14.1)
       '@mdx-js/react':
         specifier: ^3.1.0
-        version: 3.1.0(@types/react@19.1.1)(react@19.1.0)
+        version: 3.1.0(@types/react@19.1.2)(react@19.1.0)
       '@next/bundle-analyzer':
         specifier: 15.3.1-canary.8
         version: 15.3.1-canary.8
       '@next/mdx':
         specifier: 15.3.1-canary.8
-        version: 15.3.1-canary.8(@mdx-js/loader@3.1.0(acorn@8.14.1))(@mdx-js/react@3.1.0(@types/react@19.1.1)(react@19.1.0))
+        version: 15.3.1-canary.8(@mdx-js/loader@3.1.0(acorn@8.14.1))(@mdx-js/react@3.1.0(@types/react@19.1.2)(react@19.1.0))
       '@octokit/graphql':
         specifier: ^8.2.2
         version: 8.2.2
@@ -91,7 +91,7 @@ importers:
         version: 19.1.0(react@19.1.0)
       react-innertext:
         specifier: ^1.1.5
-        version: 1.1.5(@types/react@19.1.1)(react@19.1.0)
+        version: 1.1.5(@types/react@19.1.2)(react@19.1.0)
       react-is:
         specifier: 19.1.0
         version: 19.1.0
@@ -103,7 +103,7 @@ importers:
         version: 2.0.0(react@19.1.0)(schema-dts@1.1.5)(typescript@5.8.3)
       react-textarea-autosize:
         specifier: ^8.5.9
-        version: 8.5.9(@types/react@19.1.1)(react@19.1.0)
+        version: 8.5.9(@types/react@19.1.2)(react@19.1.0)
       react-timeago:
         specifier: ^8.2.0
         version: 8.2.0(react@19.1.0)
@@ -178,11 +178,11 @@ importers:
         specifier: ^15.7.14
         version: 15.7.14
       '@types/react':
-        specifier: ^19.1.1
-        version: 19.1.1
+        specifier: ^19.1.2
+        version: 19.1.2
       '@types/react-dom':
         specifier: ^19.1.2
-        version: 19.1.2(@types/react@19.1.1)
+        version: 19.1.2(@types/react@19.1.2)
       '@types/react-is':
         specifier: ^19.0.0
         version: 19.0.0
@@ -922,8 +922,8 @@ packages:
   '@types/react-is@19.0.0':
     resolution: {integrity: sha512-71dSZeeJ0t3aoPyY9x6i+JNSvg5m9EF2i2OlSZI5QoJuI8Ocgor610i+4A10TQmURR+0vLwcVCEYFpXdzM1Biw==}
 
-  '@types/react@19.1.1':
-    resolution: {integrity: sha512-ePapxDL7qrgqSF67s0h9m412d9DbXyC1n59O2st+9rjuuamWsZuD2w55rqY12CbzsZ7uVXb5Nw0gEp9Z8MMutQ==}
+  '@types/react@19.1.2':
+    resolution: {integrity: sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==}
 
   '@types/supports-color@8.1.3':
     resolution: {integrity: sha512-Hy6UMpxhE3j1tLpl27exp1XqHD7n8chAiNPzWfz16LPZoMMoSc4dzLl6w9qijkEb/r5O1ozdu1CWGA2L83ZeZg==}
@@ -4198,10 +4198,10 @@ snapshots:
       - acorn
       - supports-color
 
-  '@mdx-js/react@3.1.0(@types/react@19.1.1)(react@19.1.0)':
+  '@mdx-js/react@3.1.0(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
       '@types/mdx': 2.0.13
-      '@types/react': 19.1.1
+      '@types/react': 19.1.2
       react: 19.1.0
 
   '@napi-rs/wasm-runtime@0.2.8':
@@ -4224,12 +4224,12 @@ snapshots:
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/mdx@15.3.1-canary.8(@mdx-js/loader@3.1.0(acorn@8.14.1))(@mdx-js/react@3.1.0(@types/react@19.1.1)(react@19.1.0))':
+  '@next/mdx@15.3.1-canary.8(@mdx-js/loader@3.1.0(acorn@8.14.1))(@mdx-js/react@3.1.0(@types/react@19.1.2)(react@19.1.0))':
     dependencies:
       source-map: 0.7.4
     optionalDependencies:
       '@mdx-js/loader': 3.1.0(acorn@8.14.1)
-      '@mdx-js/react': 3.1.0(@types/react@19.1.1)(react@19.1.0)
+      '@mdx-js/react': 3.1.0(@types/react@19.1.2)(react@19.1.0)
 
   '@next/swc-darwin-arm64@15.3.1-canary.8':
     optional: true
@@ -4483,15 +4483,15 @@ snapshots:
 
   '@types/prop-types@15.7.14': {}
 
-  '@types/react-dom@19.1.2(@types/react@19.1.1)':
+  '@types/react-dom@19.1.2(@types/react@19.1.2)':
     dependencies:
-      '@types/react': 19.1.1
+      '@types/react': 19.1.2
 
   '@types/react-is@19.0.0':
     dependencies:
-      '@types/react': 19.1.1
+      '@types/react': 19.1.2
 
-  '@types/react@19.1.1':
+  '@types/react@19.1.2':
     dependencies:
       csstype: 3.1.3
 
@@ -7048,9 +7048,9 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
-  react-innertext@1.1.5(@types/react@19.1.1)(react@19.1.0):
+  react-innertext@1.1.5(@types/react@19.1.2)(react@19.1.0):
     dependencies:
-      '@types/react': 19.1.1
+      '@types/react': 19.1.2
       react: 19.1.0
 
   react-is@16.13.1: {}
@@ -7072,12 +7072,12 @@ snapshots:
       schema-dts: 1.1.5
       typescript: 5.8.3
 
-  react-textarea-autosize@8.5.9(@types/react@19.1.1)(react@19.1.0):
+  react-textarea-autosize@8.5.9(@types/react@19.1.2)(react@19.1.0):
     dependencies:
       '@babel/runtime': 7.27.0
       react: 19.1.0
-      use-composed-ref: 1.4.0(@types/react@19.1.1)(react@19.1.0)
-      use-latest: 1.3.0(@types/react@19.1.1)(react@19.1.0)
+      use-composed-ref: 1.4.0(@types/react@19.1.2)(react@19.1.0)
+      use-latest: 1.3.0(@types/react@19.1.2)(react@19.1.0)
     transitivePeerDependencies:
       - '@types/react'
 
@@ -7980,24 +7980,24 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  use-composed-ref@1.4.0(@types/react@19.1.1)(react@19.1.0):
+  use-composed-ref@1.4.0(@types/react@19.1.2)(react@19.1.0):
     dependencies:
       react: 19.1.0
     optionalDependencies:
-      '@types/react': 19.1.1
+      '@types/react': 19.1.2
 
-  use-isomorphic-layout-effect@1.2.0(@types/react@19.1.1)(react@19.1.0):
+  use-isomorphic-layout-effect@1.2.0(@types/react@19.1.2)(react@19.1.0):
     dependencies:
       react: 19.1.0
     optionalDependencies:
-      '@types/react': 19.1.1
+      '@types/react': 19.1.2
 
-  use-latest@1.3.0(@types/react@19.1.1)(react@19.1.0):
+  use-latest@1.3.0(@types/react@19.1.2)(react@19.1.0):
     dependencies:
       react: 19.1.0
-      use-isomorphic-layout-effect: 1.2.0(@types/react@19.1.1)(react@19.1.0)
+      use-isomorphic-layout-effect: 1.2.0(@types/react@19.1.2)(react@19.1.0)
     optionalDependencies:
-      '@types/react': 19.1.1
+      '@types/react': 19.1.2
 
   use-sync-external-store@1.5.0(react@19.1.0):
     dependencies: