React Storefront - Navigation

Navigation

This guide covers the basics of navigating between pages in React Storefront.

React Storefront provides a Link component built on top of next/link that provides additional functionality. As with Next's Link component, you need to specify both as and href props for dynamic routes:

<Link as="/p/1" href="/p/[productId]">
  Red Shirt
</Link>

Prefetching

You can prefetch and cache the data for a linked page using <Link prefetch="visible|always">. The prefetch accepts two values:

"always" - Prefetch the data for the target page as soon as the link is rendered
"visible" - Wait until the link is visible in the viewport before prefetching the data for the target page

<Link as="/p/1" href="/p/[productId]" prefetch="visible">
  Red Shirt
</Link>

By convention, the Link component will compute the URL to prefetch by adding /api/ to the beginning of the href prop. You can override this functionality by providing a prefetchURL prop:

<Link prefetch="visible" as="/p/1" href="/p/[productId]" prefetchURL="https://my.api.com/p/1">
  Product 1
</Link>

It is important to note that prefetching can result in significantly more traffic being sent to your API unless you're running behind and edge-based cache that supports shielding and request coalescing like Moovweb's XDN.

Passing props to the next page

Often times much of the data to be displayed above the fold on a given page is available when the link to that page is created. Common examples are the product name, rating, and price on a PLP. You can pass these to the PDP so they can be displayed in the skeleton while the rest of product data is being fetched from the back end.

Use Link's pageData prop to pass data from the current page to the next page.

<Link as="/p/1" href="/p/[productId]" pageData={{ product: { name: 'Red Shirt' } }}>
  Red Shirt
</Link>

Here is a complete example with PLP and PDP:

PLP Example

import useSearchResultsStore from 'react-storefront/plp/useSearchResultsStore'
import Link from 'react-storefront/link/Link'
import Rating from 'react-storefront/Rating'
import { createLazyProps, fetchFromAPI } from 'react-storefront/props'

export default function Subcategory(lazyProps) {
  const [state, updateState] = useSearchResultsStore(lazyProps)
  const { loading, pageData } = state

  return (
    <div>
      {!loading &&
        pageData.products.map((product, i) => (
          <div key={i}>
            <Link
              href="/p/[productId]"
              as={`/product/${product.id}`}
              pageData={{ product }} // this data will be immediately available on the PDP while the rest of the data is fetched from the back end
            >
              {product.name}
            </Link>
            {product.price}
            <Rating value={product.rating} />
          </div>
        ))}
    </div>
  )
}

Subcategory.getInitialProps = createLazyProps(fetchFromAPI)

PDP Example

import useLazyState from 'react-storefront/hooks/useLazyState'
import { createLazyProps, fetchFromAPI } from 'react-storefront/props'

export default function Product(lazyProps) {
  const [state, updateState] = useLazyState(lazyProps, { pageData: { product: {}, quantity: 1 } })
  const {
    loading,
    pageData: { product }
  } = state

  return (
    <div>
      {/* product.name will be available immediately when provided with <Link pageData={{ product }}> */}
      {product.name ? <Typography variant="title">{product.name}</Typography> : <Skeleton />}
    </div>
  )
}

Product.getInitialProps = createLazyProps(fetchFromAPI)