Remix Resource Prefetching — Speculative Loading

In this tutorial, you will learn about Remix Resource Prefetching. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Remix resource prefetching: prefetch pages, data, and assets before navigation for instant page transitions and faster user experience.

In this lesson, you'll use Remix's prefetching capabilities to load data and assets before the user navigates, making transitions feel instant.

What You'll Learn

How prefetching works in Remix, configure prefetch behaviors, prefetch on hover and viewport, and optimize prefetching Strategy.

Why It Matters

Prefetching eliminates the loading delay between navigation. Data and assets are already in the browser cache when the user clicks, making pages appear instantly.

Real-World Use

DodaZIP prefetches user profiles and settings pages when users hover over navigation links, making the app feel native.

flowchart LR
    A[Link Renders] --> B{Prefetch Strategy}
    B -->|intent| C[Hover Detected]
    B -->|render| D[Link Visible]
    B -->|viewport| E[In Viewport]
    C --> F[Prefetch Data + Assets]
    D --> F
    E --> F
    F --> G[Instant Navigation]
    style B fill:#121212,color:#fff

Prefetch Strategies

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

// Prefetch on hover/focus
<Link to="/dashboard" prefetch="intent">Dashboard</Link>

// Prefetch when link renders
<Link to="/analytics" prefetch="render">Analytics</Link>

// Prefetch when link enters viewport
<Link to="/reports" prefetch="viewport">Reports</Link>

// No prefetch (default)
<Link to="/settings">Settings</Link>

How Prefetching Works

When a link is prefetched, Remix:

1. Fetches the loader data
2. Loads the CSS and JS modules
3. Caches everything in the browser
4. On click, renders instantly with cached data

Prefetching NavLink

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

export default function Sidebar() {
  return (
    <nav>
      <NavLink to="/dashboard" prefetch="render">
        {({ isActive }) => <span className={isActive ? "active" : ""}>Dashboard</span>}
      </NavLink>
      <NavLink to="/analytics" prefetch="intent">Analytics</NavLink>
      <NavLink to="/users" prefetch="viewport">Users</NavLink>
    </nav>
  );
}

Custom Prefetching

Use useLinkPrefetch() for programmatic prefetching:

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

export default function ProductCard({ product }) {
  const prefetch = useLinkPrefetch();

  return (
    <div
      onMouseEnter={() => prefetch(`/products/${product.id}`)}
      onClick={() => navigate(`/products/${product.id}`)}
    >
      <h3>{product.name}</h3>
    </div>
  );
}

Prefetching and Performance

Trade-offs:

Common Mistakes

1. Prefetching everything: Prefetch only pages the user is likely to visit. Over-prefetching wastes bandwidth and server resources.
2. Using render for hundreds of links: A sidebar with 100 links prefetching on render creates 100 simultaneous requests.
3. Not considering mobile data: Mobile users on metered connections may not appreciate aggressive prefetching.
4. Prefetching authenticated pages without auth: Prefetched data from protected pages shouldn't expose sensitive info in caches.
5. Forgetting to test with throttled network: Verify prefetching behaves well under 3G or slow connections.

Practice Questions

1. What does prefetch="intent" do? Answer: Prefetches the page's data and assets when the user hovers over or focuses on the link.

2. What is prefetched when a link is preloaded? Answer: The loader data (JSON), CSS modules, and JavaScript modules for the target route.

3. What is the default prefetch behavior? Answer: No prefetching. Links only load data when clicked.

4. How do you programmatically trigger a prefetch? Answer: Use useLinkPrefetch() hook to prefetch a specific URL path.

Challenge

Build a product catalog where product cards prefetch detail pages on hover (intent), category navigation links prefetch on render, and pagination links prefetch when in viewport.

Mini Project

Create a blog with strategic prefetching: the main navigation uses render (few links), blog post cards on the index use intent (hover to prefetch), and "older posts" pagination links use viewport.

FAQ

What's Next

Learn about Remix Environment Variables for managing configuration across environments.