How to Use Prefetch in Remix for Faster Navigation

In Remix, you can use the prefetch attribute on <Link> components to load route data before navigation happens. Setting prefetch="intent" triggers prefetching when the user hovers or focuses the link, speeding up page loads without extra requests.

Syntax

The prefetch attribute on Remix's <Link> component controls when route data is loaded ahead of navigation.

• prefetch="none": No prefetching (default).
• prefetch="intent": Prefetch on user intent like hover or focus.
• prefetch="render": Prefetch immediately when the component renders.

tsx

<Link to="/dashboard" prefetch="intent">Dashboard</Link>

Example

This example shows a Remix component with two links. The first link prefetches data on user intent (hover/focus), and the second does not prefetch.

tsx

import { Link } from "@remix-run/react";

export default function Nav() {
  return (
    <nav>
      <Link to="/dashboard" prefetch="intent">Dashboard (prefetch on hover)</Link>
      <br />
      <Link to="/profile" prefetch="none">Profile (no prefetch)</Link>
    </nav>
  );
}

Output

<nav><a href="/dashboard">Dashboard (prefetch on hover)</a><br><a href="/profile">Profile (no prefetch)</a></nav>

Common Pitfalls

Common mistakes when using prefetch in Remix include:

• Not setting prefetch explicitly, which defaults to none and disables prefetching.
• Using prefetch="render" on many links, causing unnecessary network requests and slowing the app.
• Expecting prefetch to preload all assets; it only preloads route data and loaders.

tsx

/* Wrong: No prefetch attribute disables prefetching */
<Link to="/settings">Settings</Link>

/* Right: Prefetch on user intent */
<Link to="/settings" prefetch="intent">Settings</Link>

Quick Reference

Prefetch Value	When Prefetch Happens	Use Case
none	No prefetching	Default, no extra data loading
intent	On hover or focus	Best for user-friendly prefetching
render	Immediately on render	Use sparingly for critical links

Key Takeaways

Use prefetch="intent" on <Link> to load data when users show intent to navigate.

Avoid prefetch="render" on many links to prevent excessive network requests.

Prefetch only loads route data, not all page assets or scripts.

Default prefetch is "none", so set it explicitly to enable prefetching.

Prefetch improves user experience by making page transitions faster and smoother.