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 { PrefetchWhenOver, PrefetchWhenVisible } from '@studiometa/ui';

registerComponent(PrefetchWhenOver);
registerComponent(PrefetchWhenVisible);

index.html

<!-- Will be prefetched on mouseenter -->
<a href="/path" data-component="PrefetchWhenOver">...</a>

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

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: 'AbstractPrefetch',
  };

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