Routing and Links

The framework uses React Router for routing, both on server and client side. The routes are set up in your Shop.js. Since shop is server side rendered, it is possible to browse the shop without JavaScript enabled. In that case, it will use the server rendered <a> tags, and do full page reloads whenever you click on a link. This is good practice, and makes sure that any search engines easily can index your site. However, for improved performance, we don't want to do full page reloads when navigating on the client, and if the user has JavaScript enabled we can do so, as long as you're using the <Link> component from react-router-dom.

All URLs will be pattern matched by react-router, and render the proper component based on how your Shop.js is setup. If there's no match, it will fall back on the component called DynamicRoute which looks up the URLs with the StoreAPI and then renders the proper page.

There's a further optimization you can do to speed up client side navigation even more, and that is to use our specialized Link components - ProductLink, CategoryLink and ContentPageLink whenever you're sure what content type your linking to. These components will also send some state along the link target, which lets the DynamicRoute component know that we're about to render e.g. a Product Page, even before the StoreAPI has returned data from the route lookup. This lets us 1) render the product page loading state immediately when navigating, or even 2) render parts of the product page using product data we might have already fetched.

For example: On a category page, you have usually already fetched some information about a product (name, first image, price etc), which could be used to render a partial product page until the rest of the data (description, variants etc) have been fetched.

Read more about Linking to dynamic routes