`+prefetchStaticAssets`

Environment: client

false | 'hover' | 'viewport'

Default: 'hover'

Local

Provided by: vike

// +config.js
 
export default {
  // Default value: 'hover'
  prefetchStaticAssets: 'viewport'
}

// +config.ts
 
import type { Config } from 'vike/types'
 
export default {
  // Default value: 'hover'
  prefetchStaticAssets: 'viewport'
} satisfies Config

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
}

// /renderer/+config.ts
// Environment: config
 
import type { Config } from 'vike/types'
 
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
} satisfies Config

Viewport prefetching is disabled in development. (Because preloading pages that early contradicts Vite's lazy-transpiling approach and it would 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.ts
 
// 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'

// /pages/+prefetchStaticAssets.ts
 
// 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.)

+prefetchStaticAssets

Override for individual links

Programmatic prefetch()

Different settings for mobile/desktop

See also

`+prefetchStaticAssets`

Programmatic `prefetch()`