Server side state changes in Nuxt are disappearing on render

1
votes

I'm trying to wrap my head around this problem I'm having. Let me break it down for you.

  1. I have a Nuxt project, which utilizes a modular store.
  2. I have a global middleware that only runs server side (meaning when the page is refreshed).
  3. This middleware is used to check if there's a cookie with user data, if so I'm making a post request to Firebase to evaluate the refresh token and fetch the user meta information (such as display name, etc). (I also tried using NuxtServerInit, I get the exact same problem)
  4. All of this works perfectly. It runs just fine and by logging everything I know it is working and the state is changed.

In a loginUser() method, it sets the state of the application. (A token and display name value). When I login through the web app itself the cookie gets set properly and the state as well. The token is stored there and the display name as well.

However if I refresh my page it goes through the middleware and sets the state, but then on render it seems to be discarding all these changes I made to the store on server side and resets the store ready to be used on the client side.

Am I missing a nuxt configuration here? Do I have to setup a specific key to tell nuxt to preserve the server side rendered store?

Does anybody have any experience with this happening? If so please point me in the right direction.

1
javascriptvue.jsserver-sidenuxt.js
Can you post your code? I think you should set this to run from nuxtServerInit so perhaps show us what you did with that. – Andrew1325
It is possibly the page loaded while the http request not yet resolve. You should use 'promise' and 'async' / 'await' to wait the promise resolve / http request resolve in nuxtServerInit before the page start rendering – Januartha
I'm having a similar issue. Anyone who figures this out, would be awesome to hear from you – Jonathan

1 Answers

0
votes

If, like me, you are doing something with the component in which your props for the state are programmatic whilst on the server, but get set as a component element on the client, then you should check whether they are set as props or as attributes on the client side. I think that, as it is rendered on the server, the attributes can be interpreted as props, but as they settle in the frontend, they become unreadable, and so the state disappears. This leads to the effect of seeing the page look correctly rendered for a split-second, only to then rerender without the correct state.