<p dir="auto">Moved from <a href="https://github.com/vuejs/vue-ssr-docs/issues/210" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue2-ssr-docs/issues/210/hovercard">vue-ssr-docs#210</a>.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.21</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://github.com/phil294/vue-hackernews-ssr-alternative-data-fetching">https://github.com/phil294/vue-hackernews-ssr-alternative-data-fetching</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">In SSR docs, option 2, <a href="https://ssr.vuejs.org/guide/data.html#client-data-fetching" rel="nofollow">Fetch data after the matched view is rendered</a>, calls <code class="notranslate">asyncData</code> in <code class="notranslate">beforeMount</code>.</p>
<p dir="auto">The pseudo-syntax is</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (asyncData)
  asyncData()"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">asyncData</span><span class="pl-kos">)</span>
  <span class="pl-en">asyncData</span><span class="pl-kos">(</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">This does not check if <code class="notranslate">asyncData</code> 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.</p>
<p dir="auto">In the linked repro, I cloned vue-hackernews and <a href="https://github.com/phil294/vue-hackernews-ssr-alternative-data-fetching/commit/bc6e1195789a3b0f61f92eeb99c4b8fb908638a8">changed the fetch method accordingly</a>. I also added a console.log to when <code class="notranslate">fetchIdsByType</code> is called which happens when <code class="notranslate">asyncData</code> is called.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Data is fetched on server, client does not fetch it again (as is the case with the usual <code class="notranslate">router.beforeResolve</code> solution (step 1).</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Data is fetched twice, also on client, because there is no check on whether the data is already there, effectively making option 2 unusable.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://github.com/maoberlehner/transition-to-height-auto-with-vue">https://github.com/maoberlehner/transition-to-height-auto-with-vue</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Source: <a href="https://github.com/maoberlehner/transition-to-height-auto-with-vue">https://github.com/maoberlehner/transition-to-height-auto-with-vue</a></p>
<p dir="auto">Demo: <a href="https://transition-to-height-auto-with-vue.netlify.com/" rel="nofollow">https://transition-to-height-auto-with-vue.netlify.com/</a></p>
<p dir="auto">Source has scoped css on the <code class="notranslate">*</code> rule. However in the demo, it is not applied.</p>
<p dir="auto">However if you change <code class="notranslate">v-if</code> to <code class="notranslate">v-show</code>, the <code class="notranslate">*</code> rule will be applied to that scope.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The functional component's scope is added on both v-if and v-show usage.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The functional component's scope is added only on v-show and not applied on v-if.</p>