Route handling and data fetching in JSS apps

Abstract

How JSS handles route changes and data fetching from Sitecore

In Sitecore, content authors can control the URL of each page by organizing the content tree in accordance with the desired URL structure.

Routes in a JSS app are similar to website pages or Sitecore items in the site root. The sample apps use the most popular routing platform for their library to resolve routes when the app runs. Routes are hierarchically defined, forming a traditional page-tree architecture. Because there is no requirement to force your app to use this routing paradigm, you can implement more complex routing patterns if you want to.

For example, assuming the content items in the following Sitecore tree structure are pages/routes:

content
  site 1
    Home
      About
      Products
        Product X
        Product Y
        Product Z
  site 2
    Home
  site 3
    Home

Sitecore automatically maps those pages to the following URLs:

https://site-1-hostname/
  https://site-1-hostname/about
  https://site-1-hostname/products
    https://site-1-hostname/products/product-x
    https://site-1-hostname/products/product-y
    https://site-1-hostname/products/product-y
https://site-2-hostname/
https://site-3-hostname/

JSS apps are expected to fully support Sitecore URL mapping.

Note

Site hostnames and rules for how to map page names to URL segments (casing, white-space replacement, and so on) are defined in XML configs. Discuss with the Sitecore developers on your team whether to customize this, based on business requirements. Any customizations to how Sitecore handles routing requirements require collaboration between front-end and back-end developers.

Using custom routing might require implementing the same custom routing on the Sitecore back end to allow editing the custom routed site. When possible, try to use hierarchical routes.

Changing routes in a JSS app involves making a call to a Sitecore endpoint with REST or GraphQL to fetch data for the new route. Therefore, JSS sample apps define custom routing implementations that also handle data fetching and/or state management, as follows:

You can customize data fetching functions for your application by using custom data fetchers or using one of the strategies for extending the Sitecore Layout Service.