---
title: "Routing and state management in the JSS React app"
slug: "routing-and-state-management-in-the-jss-react-app"
abstract: "Overview of client-side and server-side routing and state management flow."
---
# Routing and state management in the JSS React app

The sample app uses dynamic routing based on the [Layout Service](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/layout-service.html "Layout Service") (or local [route data files](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/types-of-jss-manifest-data.html "Types of JSS Manifest data") in disconnected mode) and uses route/navigation changes to trigger app state changes. Tracing the primary execution flow must begin with the route configuration.

<details>
<summary><h2>Client-side routing</h2></summary>

Starting from the main client-side entry point of the app in the `src/index.js` file, the following describes the flow of the client-side routing:

- In the file `src/index.js` SSR data and state are gathered and passed on to the `<AppRoot>` component.
- In the file `src/AppRoot.js` the router is configured to respond to app routes and pass them on to `<RouteHandler>`.
- In the file `src/RouteHandler.js`, Layout Service data is acquired for the current route, and the route and language state of the app is maintained. Route data is passed off to the `<Layout>` component.
- In `Layout.js`, the shell HTML and global elements of the JSS app, along with its root `<Placeholder>`(s) are rendered.
- The remaining structure of the route is defined by the route data, which defines which components - and their content data - live in each placeholder.

</details>

<details>
<summary><h2>Server-side routing</h2></summary>

When the React app is prerendered by a Node server, it returns HTML to the client in the initial response. This means that the route data flow is similar to client-side routing but has a few key differences.

The following describes how the server-side route data flow differs from the client-side routing:

- The first step varies based on application mode:
    - In [integrated mode](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/start-a-jss-app-in-integrated-mode.html "Start a JSS app in integrated mode") only, Sitecore receives the request, parses the route server-side, determines whether the requested item will be handled by a JSS application, and which bundle to execute if you have more than one JSS application deployed in Sitecore.
    - In [headless mode only](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/headless-server-side-rendering-mode.html "Headless server-side rendering mode"), the Node SSR proxy receives a request and passes it on to a Sitecore layout service.
- The Node host invokes the `renderView` function in the `server/server.js` file. The function arguments include the route data / [Layout Service](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/layout-service.html "Layout Service") output.
- The `renderView` function performs the following steps:
    - Receives the layout and dictionary data to use when server-side rendering (SSR).
    - In the root component `src/AppRoot.js`, stores the SSR data in the app's initial state in the member `sitecoreContext`. This initial state is provided to the `SitecoreContext` component wrapping the application.
    - Renders the app to HTML using React's SSR capabilities.
    - Embeds the rendered app within its `index.html` template and sets metadata and the SSR state. The SSR state (`window.__JSS_STATE__`) is used to rehydrate the app state on the client, preventing the need to call Layout Service for initial route data.
    - Invokes the render callback function with the final HTML.

> [!note]
> When using GraphQL, the sample app by default uses Apollo GraphQL tools to render the app to HTML on the `renderToStringWithData()` server. This allows server-side rendering with the async results of GraphQL queries evaluated. If you are not using GraphQL, you can use `ReactDOMServer.renderToString()` method instead.

</details>