prefetchStaticAssets

// +config.js

export default {
  // Default value: 'hover'
  prefetchStaticAssets: 'viewport',
}

The prefetchStaticAssets setting requires Client Routing.

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 contradicts Vite's lazy-transpiling approach and, therefore, significantly slows down development speed.)

Only static assets are prefetched: the pageContext of pages isn't prefetched, see #246.

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:

// For small screens, such as mobile, viewport prefetching can be a sensible strategy
export const prefetchStaticAssets =
  window.matchMedia('(max-width: 600px)').matches ? 'viewport' : 'hover'
// 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'

See also: