Nuxt.js: New fetch problem hydrate with store

[javiercno]

Version

v2.12.2

Reproduction link

https://codesandbox.io/s/nuxt-fetch-store-5rbyp

Steps to reproduce

Show console and view error.

What is expected ?

Nuxt correct renderer changes in vuex

What is actually happening?

Nuxtjs does not render changes to vuex used outside component in SSR

[UnderTheMoonspell]

Having the same problem in a normal component (so not layout).

async fetch () {
      await this.$store.dispatch('statics/fetchFooterPageTextIfNeeded', {
        apiFilter: this.apiFilter,
        stateRef: this.stateRef,
      })
}

I have the old fetch working as expected in pages with similar code

[javiercno]

The issue with actual new fetch, depending on Vue 2 serverPrefetch is that you cannot update the parent nodes of the component using fetch on SSR.

@Atinux not advice to use the store when using fetch.

[UnderTheMoonspell]

Actually my problem differs a little bit. Even if I dont use the store I still get a lot of errors if I use it on the server side:

<template>
  <Modal
    no-close-on-esc
    no-close-on-backdrop
    class="_footer-page-modal"
    :title="apiFilter"
    @closeModal="$_closeFooterModal"
  >
    {{ /* eslint-disable-next-line vue/no-v-html */ }}
    <div v-if="footerPageText" class="_v-html-container" v-html="footerPageText" />
  </Modal>
</template>

<script>
async fetch () {
   if (!process.client) { this.footerPageText = await api.getFooterPageText({ apiFilter: this.apiFilter }) }
}
</script>

Results in the following

[Atinux]

You cannot use fetch() only on server-side since it will be inconsistent when doing client-side navigation.

[Atinux]

Because of current limitations of Vue2/serverPrefetch. You cannot update parent nodes from fetch() when doing SSR. Most of the time using the store is made outside the current component. So I advice not using the store or to be careful when using the new fetch()

You can use an anonymous middleware at the page level to mimic the old fetch behavior.

[AluisioASG]

@Atinux Should the advice on the store guide be updated then?

[UnderTheMoonspell]

@Atinux that process.client was just for testing, it's also not working without that if. So in my case at least, doesn't seem to be a store-only problem

[Atinux]

@AluisioASG Indeed nice found, could you open a PR on the docs for it? (Edit this page on GitHub at the bottom) 🙏