<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>
<p dir="auto">From knockout to angular to react, now i'm new to Vue. Really love this library, feels like "angular+react for humans".</p>
<p dir="auto">:class now support array <strong>OR</strong> object, but sometimes it's still a little tedious<br>
if :class support classnames(<a href="https://github.com/JedWatson/classnames">https://github.com/JedWatson/classnames</a>) like syntax will be better.</p>
<p dir="auto">example:<br>
from<br>
<code class="notranslate">:class="[type, checked?'checked':'', readOnly?'read-only':'', disabled?'disabled':'', fitted?'fitted':''"</code><br>
into<br>
<code class="notranslate">:class="type, {checked, disabled, fitted}, readOnly&amp;&amp;'read-only'"</code></p>
<p dir="auto">Sure, I can always use a computed method, but by doing this class names are defined in one more place(props+template -&gt; props+template+computed), which harms readability.</p>