Prefetch JS

The family of prefetch components can be used to improve performance when navigating in a page by prefetching content for the target links.

Usage

Import one of the available prefetch component in you app and use them in your HTML to enable a performance boost while navigating between pages.

app.js

import { registerComponent } from '@studiometa/js-toolkit';
import { PrefetchOnInteraction, PrefetchWhenVisible } from '@studiometa/ui';

registerComponent(PrefetchOnInteraction);
registerComponent(PrefetchWhenVisible);

index.html

<!-- Will be prefetched on the first pointer, touch or keyboard interaction -->
<a href="/path" data-component="PrefetchOnInteraction">...</a>

<!-- Will be prefetched when visible in the viewport -->
<a href="/path" data-component="PrefetchWhenVisible">...</a>

Renamed in v2

PrefetchOnInteraction was named PrefetchWhenOver in v1. It no longer listens for mouseenter on a mounted instance: it uses the interaction mount strategy, which mounts on the first pointerenter, pointerdown or focusin. That covers touch and keyboard, which a mouse-only mouseenter never did.

Create your own prefetch strategy

If you need a custom strategy to prefetch a given link, you can extend the AbstractPrefetch class exported by the package and call its prefetch() method when needed.

import { AbstractPrefetch } from '@studiometa/ui';

export default class PrefetchOnPointerdown extends AbstractPrefetch {
  static config = {
    name: 'PrefetchOnPointerdown',
  };

  onPointerdown() {
    this.prefetch();
  }
}