🔍Search
📚 Docs Menu
🌱 Get Started

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 eargly 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.

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 because window.matchMedia() only exists in the browser and it would prevent Vike from loading +config.js files.)

See also:

See also