Standalone React Link component with Astro prefetching and client side caching

link.tsx

import { prefetch } from "astro:prefetch";

import { pathCache as cache } from "./path-cache";

export function Link({
  href,
  children,
  pathCacheKey,
}: {
  href: string;
  pathCacheKey: string;
  children: React.ReactNode;
}) {
  const handlePrefetch = () => {
    if (!cache.get(pathCacheKey)) {
      prefetch(href);
    }
  };

  return (
    <a
      href={href}
      data-astro-cache-path={pathCacheKey}
      onMouseEnter={handlePrefetch}
      onTouchStart={handlePrefetch}
    >
      {children}
    </a>
  );
}