Prefetching

Prefetching is a powerful technique for improving user experience by loading data before it's explicitly needed. When data is prefetched, it's available in the cache, so when the user navigates to a new view, the content can be displayed instantly without a loading spinner. With Hyper Fetch, prefetching is incredibly simple to implement.

What you'll learn

1. What prefetching is and why it's beneficial for user experience.
2. How to implement basic prefetching for static data.
3. How to prefetch data for dynamic routes based on user interactions.
4. How prefetching leverages the cache to provide instant data access.

---

The Concept

The core idea behind prefetching is to anticipate a user's next move and fetch the necessary data in advance. For example, if a user is likely to click on a user's profile from a list, you can start fetching that profile's data as soon as the list is displayed, or even when the user hovers over the list item.

Hyper Fetch's design makes this trivial. By simply executing a request with .send(), you trigger the entire data-fetching lifecycle, including:

1. Sending the request to the server.
2. Receiving the response.
3. Storing the response in the cache.

Later, when a component or part of your application logic needs this data, executing the same request again will make Hyper Fetch find it in the cache and deliver it instantly.

---

Basic Prefetching

The most straightforward use case for prefetching is loading data that a user is very likely to need soon. For example, you might prefetch a list of items for a dashboard page as soon as the user logs in.

Let's say we have a request to fetch a list of users.

// Note: All examples on this page are live and executable.
// We will use mock data to show you the result of the request.
const getUsers = client.createRequest()({
  method: "GET",
  endpoint: "/users",
  options: {
    mock: {
      data: [
        { id: 1, name: "John" },
        { id: 2, name: "Jane" },
      ],
    },
  },
});

To prefetch this data, you just need to call .send() on the request instance at an appropriate time in your application's lifecycle—for example, when a related component mounts or when the app initializes.

getUsers.send({
  onSuccess: ({ response }) => {
    // The data is now in the cache, ready for instant access.
    console.log("Prefetched data:", response.data);
  },
});

After executing, the data is stored in the cache. Subsequent calls to the getUsers request will retrieve the data from the cache instantly, as long as it hasn't been invalidated.

---

Dynamic Prefetching

A more advanced and common scenario is prefetching data that depends on user interaction, like hovering over a link. This is where prefetching truly shines, as it can make UI transitions feel seamless.

Consider a request that fetches details for a specific user by their ID.

// Note: All examples on this page are live and executable.
// We will use mock data to show you the result of the request.
const getUser = client.createRequest()({
  method: "GET",
  endpoint: "/users/:userId",
  options: {
    mock: ({ params }) => ({
      data: { id: params.userId, name: `User ${params.userId}` },
    }),
  },
});

You can trigger a prefetch when the user hovers over a UI element associated with a particular user. This way, if they decide to click, the data will likely already be loaded.

Here's how you might implement a prefetching function for a user's details:

function prefetchUser(userId) {
  // We set the required parameter and send the request.
  // The response will be cached against the request key, which includes the user ID.
  getUser.setParams({ userId }).send({
    onSuccess: ({ response }) => {
      console.log(`Prefetched user ${userId}:`, response.data);
    },
  });
}

// Simulate hovering over two different users
prefetchUser(1);
prefetchUser(2);

In a real application, you would call prefetchUser inside a onMouseEnter or onPointerEnter event handler. Each time it's called with a new userId, Hyper Fetch will cache the response separately for that user.

---

Prefetching and the Cache

Prefetching is effective because of Hyper Fetch's built-in caching layer. When you call .send(), the request's response is automatically cached. The cache key is generated based on the request's endpoint, method, parameters, and other properties, ensuring that each unique request has its own cache entry.

When you later try to fetch the same data, Hyper Fetch checks the cache first. If a fresh (not stale) response is found, it's returned immediately, and no network request is made. This is what creates the "instant" experience for the user.

---

Congratulations!

You've learned how to leverage prefetching in Hyper Fetch to build faster and more responsive applications.

• You understand that prefetching is about loading data in advance to improve perceived performance.
• You can implement basic prefetching for static data by simply calling .send().
• You know how to implement dynamic prefetching for data that depends on user interactions.
• You understand how prefetching and caching work together to provide instant data access.