title: Differences of 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs'
body: <p>I write a simple Nuxtjs project. Based on what I learned from Nuxtjs documents and my experience while testing it, I could not understand the difference between 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs'</p>
  
  <p>For example in the following page:</p>
  
  <pre><code>// pages/index.vue
  
  &lt;template&gt;
      &lt;div class="userip"&gt;{{userip}}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          data() {
             return {
                 userip: 'in process ...'
             }
          },
  
          async asyncData() {
              let res = await fetch("https://api6.ipify.org?format=json")
              .then(response =&gt; response.json());
  
              return {userip: res.ip}
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>if I run the following command:</p>
  
  <pre><code>cmd: nuxt generate
  </code></pre>
  
  <p>while Nuxtjs is configured in universal mode, it gives me pre-rendered files that also has SPA functionalities on the user's browser. For example, the file after the build is like the following:</p>
  
  <pre><code>// dist/index.html
  
  &lt;body&gt;
    ...
      &lt;div class="userip"&gt;14.182.108.22&lt;/div&gt;
    ...
  &lt;/body&gt;
  </code></pre>
  
  <p>and when I run</p>
  
  <pre><code>cmd: nuxt start
  </code></pre>
  
  <p>or</p>
  
  <pre><code>cmd: nuxt dev
  </code></pre>
  
  <p>without generating prerendered files, then it makes a real SSR which gets rendered on every request. And now if I run the following:</p>
  
  <pre><code>cmd: nuxt generate 
  </code></pre>
  
  <p>while in the SPA mode of Nuxtjs, it gives me some unrendered SPA files (like building the Vuejs project without even using Nuxtjs). The following is an example output:</p>
  
  <pre><code>// dist/index.html
  
  &lt;body&gt;
    ...
      &lt;div id="__nuxt"&gt;&lt;style&gt;#nuxt-loading { ... } ...&lt;/style&gt;&lt;/div&gt;
    ...
  &lt;/body&gt;
  </code></pre>
  
  <p>which even doesn't contain components rendered inside.</p>
  
  <p>And in live mode (without generating prerendered files),</p>
  
  <pre><code>cmd: nuxt start
  </code></pre>
  
  <p>or</p>
  
  <pre><code>cmd: nuxt dev
  </code></pre>
  
  <p>which serves unrendered files to the client.</p>
  
  <p>So, what is the difference between a Vuejs project which uses the SPA mode of Nuxtjs and one that does not use Nuxtjs at all?</p>