feat: 部分链接预渲染

Author: coderz-w

src/app/(app)/projects/page.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import Link from 'next/link';
 import Image from 'next/image';
 
 import { GitHubBrandIcon } from '@/components/icons/platform/GitHubBrandIcon';
 import { cn } from '@/lib/helper';
 import { ProjectModel, projectList } from '~/index';
+import { PrefetchLink } from '@/components/modules/shared/PrefetchLink';
 
 export default function Projects() {
   return (
@@ -41,7 +41,7 @@ const ProjectCardList = ({ data }: { data: ProjectModel[] }) => (
 );
 const ProjectCard = ({ project }: { project: ProjectModel }) => {
   return (
-    <Link
+    <PrefetchLink
       href={project.url}
       key={project.id}
       className="group flex shrink-0 grid-cols-[60px_2fr] flex-col items-center gap-4 md:grid"
@@ -59,7 +59,7 @@ const ProjectCard = ({ project }: { project: ProjectModel }) => {
           {project.desc}
         </span>
       </span>
-    </Link>
+    </PrefetchLink>
   );
 };
 

src/components/layout/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 
+import { PrefetchLink } from '@/components/modules/shared/PrefetchLink';
 import ThemeSwitcher from '@/components/ui/ThemeSwitcher';
 
 const Footer = () => {
@@ -12,11 +13,11 @@ const Footer = () => {
         <div className="relative mx-auto max-w-7xl lg:px-8 h-full flex flex-row items-center justify-around">
           <div className=" flex items-center gap-x-4 font-mono">
             <span className="">
-              <Link href={'/'}>
+              <PrefetchLink href={'/'}>
                 <span className=" relative before:content-[''] before:absolute before:bottom-[-2px] before:w-[0px] hover:before:w-[100%] before:h-[1px] before:bg-[var(--accent-color)] before:transition-all before:duration-300">
                   关于我
                 </span>
-              </Link>
+              </PrefetchLink>
             </span>
             <span className="">
               <Link href={'/'}>

src/components/layout/Header/HeaderCenterContent.tsx

@@ -3,12 +3,12 @@
 import { LayoutGroup, m, useMotionTemplate, useMotionValue } from 'framer-motion';
 import React, { memo } from 'react';
 import { usePathname, useParams } from 'next/navigation';
-import Link from 'next/link';
 
 import { MenuPopover } from './MenuPopover';
 
 import { cn } from '@/lib/helper';
 import { IHeaderMenu, headerMenuConfig } from '~/router';
+import { PrefetchLink } from '@/components/modules/shared/PrefetchLink';
 
 export const HeaderCenterContent = () => {
   const params = useParams();
@@ -137,7 +137,7 @@ function AnimatedItem({
 }) {
   return (
     <div>
-      <Link
+      <PrefetchLink
         href={href}
         className={cn(
           'relative block whitespace-nowrap px-4 py-2 transition',
@@ -156,7 +156,7 @@ function AnimatedItem({
             layoutId="active-nav-item"
           />
         )}
-      </Link>
+      </PrefetchLink>
     </div>
   );
 }

src/components/modules/list/PostItem.tsx

@@ -1,7 +1,7 @@
-import Link from 'next/link';
 import { memo } from 'react';
 
 import { PostItemHoverOverlay } from './PostItemHoverOverlay';
+import { PrefetchLink } from '../shared/PrefetchLink';
 
 import dayjs from '@/lib/dayjs';
 import { MdiClockOutline } from '@/components/icons/clock';
@@ -12,7 +12,10 @@ export const PostItem = memo<{ data: PostItemType }>(function PostItem({ data })
   const postLink = `/notes/${data.path}`;
 
   return (
-    <Link href={postLink} className="relative flex flex-col py-8 focus-visible:!shadow-none gap-2">
+    <PrefetchLink
+      href={postLink}
+      className="relative flex flex-col py-8 focus-visible:!shadow-none gap-2"
+    >
       <PostItemHoverOverlay />
       <h2 className="relative text-balance break-words text-2xl font-medium">{data.title}</h2>
 
@@ -27,6 +30,6 @@ export const PostItem = memo<{ data: PostItemType }>(function PostItem({ data })
           <p>{data.tag}</p>
         </span>
       </div>
-    </Link>
+    </PrefetchLink>
   );
 });

src/components/modules/shared/PrefetchLink.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import { useState, useCallback } from 'react';
+
+interface PrefetchLinkProps extends React.ComponentProps<typeof Link> {
+  href: string;
+}
+
+export const PrefetchLink: React.FC<PrefetchLinkProps> = ({ href, children, ...props }) => {
+  const [prefetch, setPrefetch] = useState(false);
+
+  const handleMouseEnter = useCallback(() => {
+    setPrefetch(true);
+  }, []);
+
+  return (
+    <Link href={href} prefetch={prefetch} onMouseEnter={handleMouseEnter} {...props}>
+      {children}
+    </Link>
+  );
+};