imacrayon / alpine-ajax

An Alpine.js plugin for building server-powered frontends.
https://alpine-ajax.js.org
MIT License
666 stars 15 forks source link

Preloading links on hover or mousedown #100

Closed bluz71 closed 1 month ago

bluz71 commented 1 month ago

Hello Alpine AJAX,

Following on from #99, SPA navigation via hx-boost is deliberately not provided by Alpine AJAX due to browser improvements and View Transistions which I am now convinced is a reasonable position to take.

However, would it be possible for Alpine AJAX to provide a link preloading mechanism to make page to page navigation even speedier? Something like:

HTMX provides preloading on either mousedown or mouseover events, defaulting to mousedown. I think this is a very sensible default and to be honest is just about all this is required since mouseover could end up in disaster (too many requests, many not necessary).

The Alpine AJAX library author posted this on X:

There’s so many accessibility & state management foot guns in SPA navigation I’m not sure it’s the best approach. There’s cool alternative browser APIs like Speculative Loading & View Transitions that are easier to implement without so many downsides.

Speculative Loading whilst interesting does not seem as immediately useful is mousedown Link preloading.

I would be interested to know what position Alpine AJAX takes on this.

Best regards.

imacrayon commented 1 month ago

Hey! Thanks for being so thorough with your issue.

I'm definitely considering adding support for preloading, I keep waffling on it though because the Instant.page library already does a great job of covering this feature. The code base is focused and small, and the author seems to do a good job of staying on top of preloading best practices.

bluz71 commented 1 month ago

Hello @imacrayon,

See this comment in #99.

bluz71 commented 1 month ago

@imacrayon,

The speculationrules API works in Chrome to preload links on hover.

I just added this to my app's layout:

    <script type="speculationrules">
    {
      "prerender": [{
        "source": "document",
        "where": {
          "href_matches": "/*"
        },
        "eagerness": "moderate"
      }]
    }
    </script>

Details are provided here.

Note, this does not work in Brave browser as noted here.

Safari and Firefox, not yet, but I do envisage this eventually being done.

I suggest do nothing, let browsers worry about preloading.

Best regards.