Prefetching page on link hovers

[saurabhdaware]

We can add JavaScript that will preload the page if the link to that page is hovered. Gatsby does that and I've seen other websites like DEV.to, Flipkart doing that.

This will help us load the pages faster!

[judicaelandria]

what is your approach for that ? because this is a cooool features 😎

[saurabhdaware]

Not really sure about the approach yet. We need some way to prefetch the html page. We can fetch HTML page with JavaScipt fetch() but I am not sure if we actually visit it the next time whether it will load from cache or again fetch the page.

[saurabhdaware]

on hold until the next refactor is done to avoid conflicts

[pantharshit00]

This will be a really necessary feature if abell wants to compete with other fancy static site generators.

I think we can use turbolinks here. Same library powering hey.com so I think it is quite reliable. https://github.com/turbolinks/turbolinks

[pantharshit00]

This also means we need to inject some javascript, not sure if we are already doing this.

[saurabhdaware]

We are not. We can now instead write a Abell Component that wraps anchor tag and handles this. We can ship it with abell so users can const Link = require('abell/ui/Link.abell')

[saurabhdaware]

Oh I just checked turobolinks. I think they are doing a lot more than we need. I was thinking about vanilla implementation by having hover listeners and fetching the page.

Dumb questions:
If I just call fetch('nice.html') and do nothing with the response, but then visit nice.html, will it load from cache or will it completely fetch the page again

[pantharshit00]

I have never done that with fetch 😅

This is bit of research topic for us now, balancing out the feature and not make it bloated.

[abhijit-hota]

I don't think fetching on hover is really a good way to do it. What if I click the link just after the moment I hover over it?

We can now instead write a Abell Component that wraps anchor tag and handles this. We can ship it with abell so users can const Link = require('abell/ui/Link.abell')

This would be a better approach. Like Next.js does it, prefetching the page wrapped with Link tags would speed up navigation. Although they have their own router and prefetching functions. You might want to look into their implementations.

Next.js implementations:

• Link
• The prefetch function in their router

(P.S. I was just looking into Abell and this issue seemed interesting to me. Just dropped my two cents here. =) )

[saurabhdaware]

Thank you so much this is super helpful! In Next.js they have single .html file and pages as javascript data so they can preload that javascript data and switch the route. Abell has multiple .html files so we have to fetch the .html content which I am not yet sure how we can do it.

[PiyushSuthar]

You should give this a try! https://instant.page/
I'm using it on most of my sites... You may see this working on my Test Abell Site

[saurabhdaware]

This looks great! I'll check them out. Majorly we want to avoid the libraries since this is the JS which will be bundled with user's code so it is better to have custom implementation. We can check their code though so it will help.