Routing and state management in the JSS Vue.js sample app
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.
This execution flow mentions the SitecoreJssStore
plugin. The plugin helps developers access Sitecore context and route data.
Client-side routing
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 tosrc/createApp.js
. -
In the file
src/createApp.js
, the Vue app instance is created and configured along with the app router, defined insrc/router.js
, and rendering is handed over tosrc/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 filesrc/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 insrc/router.js
. -
In the file
src/router.js
the router is configured to respond to app route changes and pass them to thesrc/RouteHandler.vue
component. -
In the file
src/RouteHandler.vue
, route/Layout Service data is provided by theSitecoreJssStorePlugin
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 thesrc/lib/SitecoreJssStorePlugin.js
. -
In the file
src/RouteHandler.vue
, actual app markup rendering is passed off to theLayout.vue
component. Because the global app state is bound to a reactive data object, thesrc/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 outsidesrc/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.
Server-side routing
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 theserver/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 thesrc/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.
-