Route handling and data fetching in JSS apps
In XM Cloud, content authors can control the URL of each page by organizing the content tree according to the desired URL structure.
Routes in a JSS app are similar to website pages or XM Cloud items in the site root. JSS 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 needed.
For example, assuming the content items in the following XM Cloud tree structure are pages or routes:
content
site 1
Home
About
Products
Product X
Product Y
Product Z
site 2
Home
site 3
HomeXM Cloud 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 XM Cloud URL mapping.
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 XM Cloud handles routing requirements require collaboration between front-end and back-end developers.
Using custom routing might require you to implement the same custom routing on the Sitecore back end to allow editing of the custom-routed site. When possible, try to use hierarchical routes.
Changing routes in a JSS app involves making a call to an XM Cloud endpoint with GraphQL to fetch data for the new route. Next.js apps use a file-system-based router and optional catch-all routes.