I came across an undocumented issue when trying to have a Quasar SPA (Single Page Application) to be Server Side Rendered. Quasar is a front-end framework built on top of Vue. This writing refers to Quasar v2, Vue 3 and Vuex 4.
My Pinia state (valid for Vuex as well) contained properties which are of type Map(). When doing an SSR render of the app, the store’s State gets populated via API calls, the page is rendered and returned to the browser.
In the rendered result, there is a variable window.__INITIAL_STATE__ which contains said State. It is used by Client Side part of the application to hydrate the State:
Server —> Populate State with API Calls —> Render Page —> return page to Client (contains window.__INITIAL_STATE__)
Client —> get fully rendered page —> Populate State from window.__INITIAL_STATE__
To generate __INITIAL_STATE__ , JSON.stringify() is used. And here lies the problem. Applying JSON.stringify to a keyed collection, may that be Map, Set, WeakMap or WeakSet, results in an empty object, {}.
So the page will work server side, return the proper HTML, yet on the client side, because of missing store values, parts of the application will have to either fetch again the data from the API, if you have that logic in place, or throw errors.
To solve this issue, I had to use regular objects instead.