Improve the way prefetched URLs are stored in the cache

[migueltrias]

Hi,
I'm using Barba.prefetch() to prefetch a specific single URL that is a little bit heavy (I don't need to prefetch the other viewport urls, so I'm not using barba/prefetch), and I've realized that when mouseover the link with the exact same URL, it gets loaded again, so I'm loading it twice when it should do nothing as it's supposed to be prefetched already.

I've inspected both xhr loads and they are identical, it's just that it does it twice...

Is this a normal behaviour? If so, how to succesfully prefetch a url and avoid loading it again through mouseover?

Thanks

[xavierfoucrier]

Hi @migueltrias,

By default, Barba prefetch links on mouseover, but you can customize this, see https://barba.js.org/docs/advanced/strategies/#Prefetch.

Normally, it shouldn't prefetch again when mouseovering if you got the caching enabled.
Take a look at https://barba.js.org/docs/advanced/strategies/#Cache and let me know.

Thanks!

[migueltrias]

hi @xavierfoucrier,
Thanks for your comment. Yeah I know about the different prefetching options. The problem is I want to use the default cache behavior (that means, not using the prefetch plugin that caches based on I.O.), but I want to manually prefetch a specific link, which happens to be the one that takes the longest in loading. Therefore, I'm using a a timeout after entering a section, and doing a manual "barba.prefetch()". In Chrome tools it loads it and everything seems fine, but then I mouseover the link and loads it again from 0. Compared both xhr loads and they look identical, I see no difference...

[xavierfoucrier]

Thanks for the feedback @migueltrias!

I will take time to check this as soon as possible and let you know.
Thanks for your patience 😉

[xavierfoucrier]

Hi @migueltrias,

After a quick check, this is related to absolute/relative URLs.
Here is a quick code you can reproduce locally that underlines the behavior:

import barba from '@barba/core';

barba.init();

// this will prefetch the page on click, and on mouseover
document.addEventListener('click', () => {
  barba.prefetch('page.html');
});

// this will prefetch the page on click only
document.addEventListener('click', () => {
  barba.prefetch('http://localhost/page.html');
});

According to the source, the prefetch method is already checking for cached URLs, see https://github.com/barbajs/barba/blob/master/packages/core/src/core.ts#L448

[migueltrias]

Hi @xavierfoucrier

Thanks for looking into this!

My manual barba.prefetch() function is trying to load a "/" relative base url (like href="/collection"), not even specifying the absolute URL... I'm trying to find the difference between both calls but they look identical to me :S

[xavierfoucrier]

Hi @migueltrias,

Calls may look identical, but cached URLs will be different:

• http://localhost/collection (through mouseover prefetch)
• /collection (through your prefetch call)

You can simply fix this by giving an absolute URL to prefetch 😉