prefetchStaticAssets
// +config.js
export default {
// Default value: 'hover'
prefetchStaticAssets: 'viewport',
}
By default,
the static assets of /some-url
are loaded as soon as the user hovers his mouse over a link <a href="/some-url">
.
This means that static assets are often already loaded before even the user clicks on the link.
You can prefetch even more eagerly by using viewport prefetching: the links are then prefetched as soon as they appear in the viewport of the user's browser.
// /renderer/+config.js
// Environment: config
export default {
// Prefetch links as soon as they enter the viewport
prefetchStaticAssets: 'viewport'
// Prefetch links when the user's mouse hovers a link
prefetchStaticAssets: 'hover'
// Disable prefetching
prefetchStaticAssets: false
}
Viewport prefetching is disabled in development. (Because preloading pages that early contradicts Vite's lazy-transpiling approach and it would, therefore, significantly slow down development speed.)
Only static assets are prefetched: the
pageContext
of pages isn't prefetched, see #246.
The
prefetchStaticAssets
setting requires Client Routing.
Override for individual links
You can override the prefetchStaticAssets
setting for individual links:
<a href="/some-url" data-prefetch-static-assets="hover" />
<a href="/some-url" data-prefetch-static-assets="viewport" />
<a href="/some-url" data-prefetch-static-assets="false" />
Programmatic prefetch()
You can programmatically call prefetch('/some/url')
, see API > prefetch()
.
Different settings for mobile/desktop
You can viewport prefetch for mobile users while only hover prefetch for desktop users:
// /pages/+prefetchStaticAssets.js
// For small screens, such as mobile, viewport prefetching can be a sensible strategy
export const prefetchStaticAssets =
window.matchMedia('(max-width: 600px)').matches ? 'viewport' : 'hover'
// /pages/+prefetchStaticAssets.js
// Or we enable viewport prefetching for any device without a mouse: mobile and tablets (but
// not laptops that have a touch display).
export const prefetchStaticAssets =
window.matchMedia('(any-hover: none)').matches ? 'viewport' : 'hover'
Make sure to define such dynamic/runtime code in a
+prefetchStaticAssets.js
file.(Don't define it inside a
+config.js
file becausewindow.matchMedia()
only exists in the browser and it would prevent Vike from loading+config.js
files.)
See also:
- MDN > Web API > Window > matchMedia()
- Stack Overflow > Detecting that the browser has no mouse and is touch-only