Prefetch page content via Ajax on link hover

[connecteev]

What problem does this feature solve?

Instantclick (http://instantclick.io) is a nifty little js library (< 3kb gzipped) that pre-fetches pages via Ajax when you hover on links, based on the user's intent to click on it. A great example of a site that does that is dev.to (example: go to https://dev.to/t/vue, open up the console and notice the ajax requests when you hover on any link) Does Nuxt support this natively? I see some mentions of "prefetching" in the API documentation but I don't see it happening on my nuxt instance (I am on nuxt-edge). Is this functionality available in Nuxt? https://nuxtjs.org/api/configuration-router#prefetchlinks

Is it off by default, perhaps? If it's not available, this would be a really nifty thing to add to the core library, perhaps as a configuration option. It would also be helpful to get more information on what "prefetch" in the API documentation is referring to, and how one can see it in action.

_{This feature request is available on Nuxt community (#c9652)}

[manniL]

Hey :wave: Nuxt is prefetching the JS chunks corresponding to the page by default (when a link is in the viewport and the user has a good connection). it does not execute asyncData or fetch of that page.

Executing these functions beforehand might lead to inconsistencies of the app state (especially when the content in the store will change before the page is even visible).

I agree, the docs need a chapter about the current behavior.

More info in https://github.com/nuxt/nuxt.js/pull/4574

[connecteev]

Thanks for the links @manniL. So there are 2 threads here:

1. Re: understanding current functionality: I agree, the nuxt documentation assumes a lot and has no real examples....I still struggle with it every day. I hope that changes in 3.x to make the framework more approachable to "non power developers" So Nuxt prefetches chunks of js for every link that is in the viewport, and this is by default, is that correct? Looking at this hello world example One thing I don't understand, why are scripts like /_nuxt/runtime.js and /_nuxt/vendors.app.js both preloaded and "deferred" on the same page?

2. I believe it still makes sense to keep this feature request open, and provide an option in Nuxt to turn on asyncData or fetch of the entire page, on certain actions like hover / hover with delay like www.instantclick.io does it? Would you agree?

Thanks..

[manniL]

So Nuxt prefetches chunks of js for every link that is in the viewport, and this is by default, is that correct?

Yes but only if the connection is good (better than 2G) and no data saver is enabled. Also, the browser has to support IntersectionObserver.

I hope that changes in 3.x to make the framework more approachable to "non power developers"

What could we do to improve the docs in your opinion?

re 2: We can keep it open, sure.

[connecteev]

@manniL Re: improving the docs, I'll add a separate enhancement for that so as not to muddy this one

[tr1s]

Coming from Gatsby, I decided to make a project in Nuxt, and was suprised to see all the components pre-fetched! I like the concept of only prefetching on hover and it would be a nice feature to have in Nuxt!

[manniL]

Coming from Gatsby, I decided to make a project in Nuxt, and was suprised to see all the components pre-fetched! I like the concept of only prefetching on hover and it would be a nice feature to have in Nuxt!

At the moment, prefetching works via intersection observer (when a <nuxt-link> is in the viewport). But that's not related to the actual issue here 🙈

[simplenotezy]

This would be a cool feature!

[kirtan403]

Any update about the progress here?

[fahmifitu]

This is still a nice feature to have in 2022