vue.js - Vuestorefront without SSR - asyncData not triggered

Question

I have very bad expirience with Vuestorefront rebuilding because every change in code takes about 25 second. So I decided to turn off SSR (for development) and now it takes about 3-4 seconds! ...but now there is problem with VueJs lifecycle.

What I use

1. Official Vuestorefront repo: https://github.com/vuestorefront/vue-storefront

Storefront is installed with: yarn, demo API, SSR endpoints and default theme. Everything works perfectly, but it is slow for development.

2. Optimized Webpack configuration: https://github.com/yireo-training/vsf1-local-webpack

Following tutorial in readme everything works fine, every change in code is builded in 4 second. Successful build automatically refresh website with hot-reload.

---

What is the problem?

• I can't open any link directly (link to product, category, etc...) and can't refresh/reload any page

I find out in these cases is skipped function asyncData which preload data. For example product page: https://github.com/vuestorefront/vsf-default/blob/master/pages/Product.vue#L334 When I click on product detail from homepage, function asyncData is triggered and product page is correctly loaded but with refresh (F5) is asyncData skipped.

Product page after reload:

I tried to reimplement code from asyncData to method beforeCreated but it still doesn't work.

---

My question

How to force calling function asyncData?

...or is there way to reconfigure Webpack to make this work?

...or is there another way to rebuild vuestorefront faster?

Answer 1

thanks for trying out my Webpack config. Please note that it is far from perfect and it requires a collaboration of minds to make it work in all situations.

As you have seen already in the code: The Vue meta plugin uses the metaInfo method to provide tags. The Product component again calls upon a computable getCurrentProduct computable, which again calls upon the Vuex getter product/getCurrentProduct. And again this requires the asyncData() method to be executed so that data is loaded from ElasticSearch or GraphQL.

The asyncData() is normally either executed asynchronously in the browser (duh!) or synchronously on the server when SSR is working. This means that in a default VSF1 situation, the call this.getCurrentProduct.meta_title (within the metaInfo method) will never fail, because it will depend upon something from Vuex that has been loaded synchronously before already. However, without SSR, this leads into a code issue, because the Vuex store will be filled after the metaInfo tag is executed. So it might make more sense to rewrite the metaInfo method a bit like the following:

metaInfo () {
    const storeView = currentStoreView()
    return {
      title: this.getCurrentProduct && htmlDecode(this.getCurrentProduct.meta_title || this.getCurrentProduct.name),
      meta: (this.getCurrentProduct && this.getCurrentProduct.meta_description) ? [{ vmid: 'description', name: 'description', content: htmlDecode(this.getCurrentProduct.meta_description) }] : []
    }

I haven't tried out this code myself, but hopefully it makes sense. It would be proof that a lot of the components shipped in the Default Theme (which you are going to customize most likely anyway, right?) are written with SSR in mind only (which makes sense to me).

As you say, another try might be to execute the asyncData anyway for every component. The core/client-entry.js file (which is part of my Webpack config as well) already contains work on this - simply scan the code for the word asyncData. Perhaps you can toggle the config option executeMixedinAsyncData to see if this changes things?

Answer 2

Found a workaround for this, the hot-reload takes around 2 sec now. You can check my pull request for this.

https://github.com/vuestorefront/vue-storefront/pull/5560

It doesn't disable SSR at all, so what was the root cause of the issue? Type checking inside the main Webpack process, so basically by moving it to another process it will compile a lot faster.

Essentially by passing transpileOnly: true to ts-loader it'll disable type checking and by using the fork-ts-checker it'll just work inside your dev environment in a separate process, so you can get most benefits from TS.

For that implementation I basically followed the recommendations from Webpack docs and installed the fork-ts-checker plugin.

Tell me how it goes, in my case it skyrocketed my productivity a lot :).