Prefetching Pages

React Storefront gives you the ability to prefetch pages to make transitions lightning fast.

The react-storefront/Link component can be configured to prefetch content simply by setting the prefetch prop. This prop can have the following values:

• visible - Only prefetch the page when the link becomes visible. If the link is below the fold, prefetching will only happen when the user scrolls the link into view.
• always - Always prefetch the page, even if the link is hidden.

For example:

<Link to="/p/1" prefetch="visible">
  Product 1
</Link>

You can prefetch HTML in CmsSlot elements by calling $.prefetchLinks on each <a> element in your handler and setting the prefetchLinks prop to true:

Handler:

import parse from 'react-storefront-extensions/html/parse'

export default async function somePageHandler(params, request) {
  // ...

  const html = await fetchUpstreamHtml()
  const $ = parse(html)
  $('a').prefetchLinks('visible') // "visible" to fetch when the link is visible or "always" to fetch it immediately

  // ...
}

React Component:

<CmsSlot prefetchLinks>{slot}</CmsSlot>

You can configure react-storefront/NavTabs to prefetch content by setting the prefetch field on MenuItemModel to "visible" or "always" as described above.

You can programmatically prefetch content by calling:

import { prefetch } from 'react-storefront/router/serviceWorker`

prefetch('/path/to/page')

This signals the service worker to prefetch and cache the page.