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