Prefetching links and images with Remix

Options

In Remix you can use the <Link> component to prefetch resources.

It would prefetch both the loader data from the route and the JavaScript the route needs.

You have 4 different options:

none: No prefetching
intent: Prefetch on hover or focus.
render: Prefetch when the link is in DOM.
viewport: Prefetch when the link becomes visible in viewport.

render and viewport aren't the same things. A link may be in the DOM but not visible yet.

Example:

<Link to={`/movies/${movie.id}`} prefetch="render">
  {movie.title}
</Link>

Prefetching images

Prefetching links doesn't prefetch images. That's a part of the browser's job when encountering an image.

However, we can still prefetch images. When prefetched, the browser won't need to load the image again after navigation. Instead, it will use the cached version.

If you've ever worked with images, you probably know that there is onLoad on the image tag. That's a way in React to keep track of when an image is loaded.

So, to clarify, downloading an image is different from prefetching a link.

How to prefetch images:

function prefetchImage(url) {
  let img = new Image();
  img.src = url;
}

Here, we create a new Image object. When setting src, the browser will start downloading the image asynchronously and then cache it.

When the user navigates to the page, the browser uses the cached image.

You can decide when to prefetch the image.

You can either do it right away or when the user hovers (onMouseEnter) or focuses (onFocus) on the link.

Just so you're not confused: This isn't a Remix thing, but something you can do in any web app.

What I prefer

It depends.

If most of our users are on mobile, I prefer render. That's because there is no way to hover on mobile.

If most of our users are on desktop, then it depends. I do prefer render still. But sometimes it's more inefficient than using intent.

It depends how many links and how heavy it is to prefetch the data of that route.

Edit: In hindsight, the balance of best worlds I think is to use viewport for prefetching.

Prefetching links and images with Remix

Comments

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

Options

Prefetching images

What I prefer

Command Palette

Comments

More from this blog

Options

Prefetching images

What I prefer