[SSR] Client data fetching in beforeMount mixin double-fetches

[phil294]

Moved from vue-ssr-docs#210.

Version

2.5.21

Reproduction link

https://github.com/phil294/vue-hackernews-ssr-alternative-data-fetching

Steps to reproduce

In SSR docs, option 2, Fetch data after the matched view is rendered, calls asyncData in beforeMount.

The pseudo-syntax is

if (asyncData)
  asyncData()

This does not check if asyncData was already called by the server. Thus, guided by the official docs, this leads to duplicate fetches. In the case of dynamic module registration, even to duplicate modules.

In the linked repro, I cloned vue-hackernews and changed the fetch method accordingly. I also added a console.log to when fetchIdsByType is called which happens when asyncData is called.

What is expected?

Data is fetched on server, client does not fetch it again (as is the case with the usual router.beforeResolve solution (step 1).

What is actually happening?

Data is fetched twice, also on client, because there is no check on whether the data is already there, effectively making option 2 unusable.

[LinusBorg]

This has to be solved in your business logic Since Vue won't decide for you how "fresh" you want your data to be. Certainly the example could be improved in this way, but that should be solved in the repository for the SSR docs (linked from within said docs):

https://github.com/vuejs/vue-ssr-docs

[phil294]

@LinusBorg I had created this very issue @ ssr-docs repo already (210) where you adivced me to open it here instead. So according to you, there is no proper place to open this issue. I am confused. :-)

Regarding the issue itself: The usecase is: Prevent entry-client from calling asyncData hooks at page load. The data was already put into the DOM, there is no need to call asyncData in the frontend again; this would negate the meaning of SSR. I highly doubt this is business logic-dependent.

Now, in the docs, there are two approaches mentioned for client data fetching.

• The "first approach" (as in HN demo etc) calls the asyncDataHooks in router.beforeResolve(...), thus preventing double-fetching.
• The "second approach" (quoted in OP) calls the asyncDataHooks in beforeMount(...) via a global Mixin, which also happens on the initial route. This approach does not seem sane and needs to be wrapped somehow. That is the problem here.

---

Should we reopen the issue at ssr-docs then?
Merry Christmas!

[LinusBorg]

Sorry about the confusion, i must have misinterpreted your original issue in the docs repository. I've reopened it, let's continue there