Link Click Hijacking (link.jsx)

💡 Overview

In a standard browser application, clicking an anchor tag (<a href="...">) triggers a full-page reload. To build a fast Single Page Application (SPA), the client router needs to capture these navigations, prevent document reloads, and instead stream React Server Component (RSC) changes in the background. The link.jsx component is Dinou's interface to handle this.

📊 Physical File Structure

The component encapsulates path resolution, click hijacking, and hover prefetching:

⚛️ 1. Component Code Walkthrough

The <Link> component wraps a standard anchor tag, resolving relative paths at render time using context hooks:

"use client";

import { useRouter, usePathname } from "./navigation.js";
import { resolveUrl, isExternalUrl } from "./navigation-utils.js";

export function Link({
  href,
  children,
  prefetch = true,
  fresh = false,
  ...props
}) {
  const { push } = useRouter();
  const pathname = usePathname();
  const resolvedHref = resolveUrl(href, pathname);

  const handlePrefetch = () => {
    if (!prefetch || !href || fresh || isExternalUrl(href)) return;
    if (window.__DINOU_PREFETCH__) {
      window.__DINOU_PREFETCH__(resolvedHref);
    }
  };

  const handleClick = (e) => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || isExternalUrl(href)) return;

    e.preventDefault();
    push(href, { fresh });
  };

  return (
    <a
      href={resolvedHref}
      onClick={handleClick}
      onMouseEnter={handlePrefetch}
      {...props}
    >
      {children}
    </a>
  );
}

⚙️ 2. The Hijack Mechanism

When a user clicks the link, the component evaluates the mouse click details to determine routing actions:

• Bypass conditions: If the user is holding down key modifiers (such as Cmd, Ctrl, Shift, or Alt) or if the link is external (isExternalUrl(href)), the handler returns immediately. This allows the browser to perform native actions (like opening in a new tab).
• Event Interception: If it's a standard internal click, it calls e.preventDefault() to block the document reload.
• SPA navigation: Calls push(href, { fresh }) from `useRouter()` to transition the route path state.

🚀 3. Hover Prefetching Optimization

To provide instantaneous page loads, the component listens for mouse hover events (onMouseEnter) to prefetch RSC Flight streams:

• Hover evaluation: If prefetch = true and the URL is internal, the component calls window.__DINOU_PREFETCH__(resolvedHref).
• Payload Pre-load: The prefetch handler executes the network request to load the RSC binary payload in the background. If the user eventually clicks the link, the payload is already cached in memory, resolving the navigation transition instantly.

📄 4. SEO & Crawler Compatibility

Importantly, the <Link> component outputs a native <a href="..."> HTML element. Search engine bots (like Googlebot) do not trigger Javascript hover or click handlers. By outputting standard anchors, crawlers can read the href links, index pages, and crawl the website structure.