My question is, what's the point of setting up Vuex for the server when the state will be overwritten when the client side hydration takes place?

I have some data (Helm env variables) that I want to store in the vuex store for later use. These variables is only available to me on the server, so I started trying to add them to the store in my createApp script when running on the server. The store state however is reset when the client side hydration kicks in, so no env variables left.

Google told me I should use like window.INITIAL_DATA to set the state again on the client: store.replaceState(window.INITIAL_DATA)

But if have to use the window object to pass store data to the client, what's the point of using Vuex on the server at all? Isn't it better to skip Vuex overhead on the server and just use Vuex on the client and populate it with INITIAL_DATA?

I'm probably missing something..

CodePudding user response：

https://ssr.vuejs.org/guide/data.html#data-store

During SSR, we are essentially rendering a "snapshot" of our app. The asynchronous data from our components needs to be available before we mount the client side app - otherwise the client app would render using different state and the hydration would fail.

To address this, the fetched data needs to live outside the view components, in a dedicated data store, or a "state container". On the server, we can pre-fetch and fill data into the store while rendering. In addition, we will serialize and inline the state in the HTML after the app has finished rendering. The client-side store can directly pick up the inlined state before we mount the app.

Also to mention: The data you access while SSR in any Component needs to come from somewhere if you want to share information across Components, this is what Vuex is there for.