Routing and state management in the JSS Vue.js sample app

Abstract

Overview of client-side and server-side routing and state management flow

The sample app uses dynamic routing based on the Layout Service (or local route data files in disconnected mode) and uses route/navigation changes to trigger app state changes. Tracing the primary execution flow must begin with the route configuration.

Tip

This execution flow mentions the SitecoreJssStore plugin. The plugin helps developers access Sitecore context and route data.

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

  • In the file src/main.js, data for server-side rendering (SSR) and state data are gathered and passed on to src/createApp.js.

  • In the file src/createApp.js, the Vue app instance is created and configured along with the app router, defined in src/router.js , and rendering is handed over to src/AppRoot.vue. If an initial state/route data is provided for the app, the application sets and manages the state using a customizable Vue plugin for JSS located in the file src/lib/SitecoreJssStorePlugin.js.

  • In the file src/AppRoot.vue, the <router-view /> component is responsible for rendering the components matched for the current route, as defined in src/router.js.

  • In the file src/router.js the router is configured to respond to app route changes and pass them to the src/RouteHandler.vue component.

  • In the file src/RouteHandler.vue, route/Layout Service data is provided by the SitecoreJssStorePlugin to a Vue reactive data object. If no initial data is present, Layout Service data is acquired for the current route, and the route and language state of the app is updated. Subsequent route changes update the global app state through the src/lib/SitecoreJssStorePlugin.js.

  • In the file src/RouteHandler.vue, actual app markup rendering is passed off to the Layout.vue component. Because the global app state is bound to a reactive data object, the src/Layout.vue component re-renders when new Layout Service/route data is received. Also, the global app state provides a way for components that live outside src/Layout.vue to react to route/context data changes.

  • In the file src/Layout.vue, 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.

When the Vue 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 only, Sitecore receives the request, parses the route server-side, and determines whether the requested item is handled by a JSS application, and which bundle to execute.

    • In headless mode only, the Node SSR proxy receives a request and passes it on to a Sitecore layout service.

  • The Node host invokes the renderView function from the server bundle located in the server/server.js file. The function arguments include the route data/Layout Service output.

  • The renderView function performs the following steps:

    • Receives the data to use when server-side rendering (layout service, dictionary).

    • Creates and initializes the app through the src/createApp.js file used in client-side rendering.

    • In the file src/createApp.js, SSR data is set into the initial state of the application using the src/lib/SitecoreJssStorePlugin.js plugin.

    • Renders the app to HTML using Vue tools for SSR.

    • Embeds the rendered app in the 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.