Testing our server-rendered application

At the beginning of this chapter, we looked at the page source of our existing client-rendered application. To test that our SSR implementation is working, all we need to do is check the page source again. Running the application and viewing the page source in Chrome now yields this:

Inspecting the updated server-rendered HTML

 

Notice that the placeholder root element is still empty, but immediately after it a new script tag has been rendered with a call to set the window.html property. On top of this, if you scroll right to the bottom of the server-rendered HTML string, you'll find window.__INITIAL_STATE__ being set to an object that represents the version of our Vuex store that was initialized during the server render:

 

Checking for initial Vuex state from the server

This value is what we use to hydrate the client-side store when our scripts are loaded and take over any further rendering of the application.