Preloading visits

[sebastiandedeyne]

It would be great if we would be able to preload visits before the user clicks a link. This would be opt-in behaviour per link.

Next.js does this pretty good:

<Link prefetch href="/">
  <a>Home</a>
</Link>

https://github.com/zeit/next.js#prefetching-pages

With the way Inertia works this could be very difficult to implement. I currently see two things we could preload:

1. Preload the entire page

We could build something like InstantClick, that prefetches the next page in the background when the user hovers over a link, or when we add a prefetch attribute to the link.

The problem here is that we'd be prefetching the html, but not the JavaScript chunk needed for the next page.

2. Preload the JavaScript chunk that's needed for the page behind the link

Ideally we would be able to preload the script for the next page's component. However, Inertia has no knowledge which URL's map to which chunks, so I have no idea how this could work.

Any input on this matter is appreciated!

[ecreeth]

@sebastiandedeyne see Google quicklink too

[sebastiandedeyne]

I like the idea of prefetching page states when an Inertia link with a prefetch attribute is in the viewport. On click, the page state would be applied, instead of doing a full visit.

What do you think @reinink? I could whip up a proof of concept.

[ecreeth]

We could build something like InstantClick, that prefetches the next page in the background when the user hovers over a link, or when we add a prefetch attribute to the link.
The problem here is that we'd be prefetching the html, but not the JavaScript chunk needed for the next page.

@sebastiandedeyne see simple-pjax

[johnpaulmedina]

Hi all! I stumbled across this when trying to think of a way to "prefetch" paginated data - looks like this discussion is over 2 years old but I wanted to see if maybe it is already done and/or reboot the conversation.

In my use case I am consuming a third party API (Twilio) on the Laravel server side - but I wanted to share and get some feedback.

I am paginating the results from Twilio REST API. What I did on the Laravel backend is cache the page results of data already consumed via the Twilio REST API - so that if a user was navigating back and forth it reduces the API requests and keeps the page loading fast.

Since I was already caching the returned responses on the server side, I was thinking to basically make a request on the VueJS/Inertia side to the next url. This way when the page is loaded, if there is a next url we make a background call to the next url (which would create the cache). Now when the user clicks the link - it was cached on the previous pages load so no waiting.

What if Inertia was following something similar when a component has a prefetch attribute it tells inertia to subsequently cache the next dataset url after loading the first response.

[claudiodekker]

Hi @johnpaulmedina!

Don't worry, this topic's idea/feature by itself is still alive, and we're actually seriously considering to add it. In fact, some proof-of-concept work has even already been done as well (#223). Unfortunately, actually implementing this is somewhere further down the roadmap (which in itself remains subject to change), as we want to remove our (internal) dependency on Axios first.

As for preventing the API request from happening when you click the back button, there's actually already a feature for that which might help your use-case: https://inertiajs.com/remembering-state

Thanks for letting us know you're interested, though! 👍

[johnpaulmedina]

Well let me know if there is any contributions I can help with. I got it working on my current project using pagination components, middleware and interceptors.

I basically created vue pagination components. Added an interceptor and responses on the front end that looks for a X-Prefetch-* header where * is the variable in response name - so for each header it will look at the response and queue up the request. On the laravel side using a middleware I am catching "pagination" data, then setting the header with the previous and next page url. It basically hits a special cache URL that mimics the users request in a QUEUE JOB to cache the results. This way the moment the user clicks next Laravel has already cached the next page. Each subsequent page load is caching the next only when the user visits not the QUEUE job.

User experience is super fast - especially on paginated data. I used Nova for an admin site and found it to be slow from time to time when working with large data and this literally solves it. I need to create special route keys still so that on that routes model changes it resets the cache to make sure that the data is not stale.

[duhaime]

Checking back at the end of 2024--is there any prefetch / preload logic built into Inertia at this point? Or any promising merge requests?

[RobertBoes]

Yes, it has.

[mattwigham]

https://v2.inertiajs.com/prefetching