Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache.
<link>
element containing a rel="prefetch"
attribute. For example:rel="prefetch"
attribute is a 'hint' to the browser that the specified URL should be prefetched. It may or may not be prefetched depending on whether the browser has sufficient idle time to do so before the user actually clicks the link.prefetch
the rel
attribute of the <link>
element can take different values depending on the type of prefetching required:<Link />
component provided by Frontity. The second will demonstrate how to create your own component implementing link prefetching.<Link>
component<Link />
component supports prefetching. The prefetching strategy that it adopts is determined by the value of the property state.theme.autoPrefetch
.state.theme.autoPrefetch
are:no
hover
in-view
all
state.theme.autoPrefetch
could then be set in the frontity.settings.js
file, for example:<Link />
component should import it from @frontity/components
:<Link>
component:<Link>
component the content should be processed by the html2react
package. See this page in our tutorial for a detailed example illustrating the steps that need to be taken.state.theme.autoPrefetch
property then a possible implementation could look like this:useEffect
to call actions.source.fetch(link)
to fetch the data if the value of state.theme.autoPrefetch
is "all", and if the value is "hover" then it calls actions.source.fetch(link)
to fetch the data when the onMouseEnter
event occurs.