Mistmatch between CSR & SSR multiplies Vue's instances x2

[Fifciu]

In one of my modules I am using AsyncDataLoader to fetch some stuff inside module's afterRegistration hook. I've tried to just use await inside async afterRegistration but with that I could not get SSR.

That's source code of that file: https://github.com/vue-wordpress/vsf-wp-json/blob/master/hooks/afterRegistration.ts

I am using repo from master branch. It is 1.10.5. With that my nodes are being multiplied. Check this:

After commenting:

AsyncDataLoader.push({
      async execute ({ route, store, context }) {
        await vuex.loadBase(store.dispatch, true);
      }
    })

Inside module. I have proper instances, no multiplied.

I am going to investigate AsyncDataLoader in core and try to fix it. Do you have any ideas/tips?

[pkarw]

Hey! Seemingly after fixing the ssr issue (within client-entry.ts) this has been broken. I guess we need to make shure the AsyncLoader.flush is well .. awaited. I guess currently it’s not and this leads to breaking the async data flow.

The other option is you’d move the logic from AsyncDataLoader to “serverPrefetch” call within your component

[Fifciu]

Looks like it is not really caused by AsyncDataLoader. By fixing SSR issue you meant that: 1fd1cf4 @pkarw?

[Fifciu]

I've struggled for a while but not succeed. I did changes inside server-entry, client-entry and app.ts. I tried to add some awaits etc. but there is probably other place which needs it.

Currently, I think that client/server does not wait for the serverPrefetch.

It is really strange behaviour because as far as I know server-renderer should process serverPrefetch out of the box. (Based on: https://ssr.vuejs.org/guide/data.html#final-state-injection)

My plugin that I've linked in the first posts mainly uses serverPrefetch + beforeMount: https://github.com/vue-wordpress/core/blob/master/mixins/wordpress/index.ts

I will also check deeply if it properly waits for each async operation. But I am pretty sure it does

[gibkigonzo]

I've tested AsyncDataLoader and it looks fine. https://github.com/DivanteLtd/vue-storefront/compare/master...gibkigonzo:bugfix/test-async-data-loader?expand=1 Here is example where we wait 10s. This nodes duplication is made by mismatch between ssr and csr content, so there should be more information in console.

[Fifciu]

I've just figured out what was wrong. Inside CookieNotification we have something like:

created () {
    this.$store.dispatch('claims/check', {claimCode: 'cookiesAccepted'}).then((cookieClaim) => {
      if (!cookieClaim) {
        this.isOpen = true
        this.$store.dispatch('claims/set', {claimCode: 'cookiesAccepted', value: false})
      } else {
        this.isOpen = !cookieClaim.value
      }
    })
  }

Looks like server does not want to wait for that. Even if I return promise or use async/await. SO probably on the server isOpen === false and on the client isOpen === true. That's why we have this csr/ssr mismatch.

I changed it to mounted which should be totally ok (right?) and it seems to work.
Thank for help guys!

[pkarw]

Perfect