Auto Prefetch data

Frontity Roadmap :biking_man:

Feature Card


This is not a closed topic. Please reply with your feedback:

  • Does it work for you?
  • What would you add?
  • What would you do differently?

Description

Right now prefetching has to be done manually by the theme developer. For example, when a post loads, it can use useEffect to prefetch the home.

We can add an autoPrefetch feature to the <Link> component so it does so automatically.

User Stories

As a Frontity developer
I want to auto prefetch the data of all the links that exist in the DOM
so that when they click, the route change is instant

As a Frontity developer
I want to auto prefetch the data when a readers hover on a link
so that when they click, the route change is instant

As a Frontity developer
I want to auto prefetch data of the links on the readers’ screen
so that when they click, the route change is instant

Possible solution

It could have four modes:

  • "no": it doesn’t prefetch
  • "hover": it does prefetching when the reader hovers over the link.
  • "in-view": it does prefetching when the link enters the screen.
  • "all": it does prefetching when the link component is mounted.

That setting would have to be exposed for the final theme user. Maybe it could be in:

  • state.theme.autoPrefetch.
  • state.router.autoPrefetch (only if the Link component ends up in libraries.router).
  • state.components.linkPrefetch.

We can disable the feature if the connection is slow, like the flying-pages library is doing: https://github.com/gijo-varghese/flying-pages/blob/master/flying-pages.js

We can also use mouseout and touchstart for the "hover" option.

I think that maybe, instead of doing the real prefetch with actions.source.fetch, we should add a <link prefetch src=""> with the URL of the API, so this prefetches don’t impact the performance.

We could do that with a new action, actions.source.prefetch. That way, when we do the route change and do the actual actions.source.fetch, the information is already there and it only has to process it (add it to the state and so on). If we do this, we avoid adding things to the state that are not needed yet.