@barba/prefetch

Barba prefetches automatically and cache your pages.

It is mainly inspired by quicklink.

How it works?

Based on Intersection Observer, it processes all eligible links that enter the viewport. Depending on your browser, you may need a polyfill to properly use this plugin.

You can use this feature regardless of the prefetchIgnore core property. Since the links will be prefetched depending on the viewport, it will prevent the core prefetch process from prefetching a link on enter.

1
2
3
4
5
6
7
8

import barba from '@barba/core';
import barbaPrefetch from '@barba/prefetch';

// tell Barba to use the prefetch plugin
barba.use(barbaPrefetch);

// init Barba
barba.init();

On slow network or with a high page weight, the server can take time to prefetch the response and can lead Barba to abort the transition and display a Timeout error message.

See the timeout setting to properly manage this behavior.