Nuxt.js-模式选择-SPA/Universal

模式选择

通过命令行创建项目时，必须在生成Universal模式或SPA模式应用程序之间进行选择

• 模式切换

  • Universal
    nuxt -u
  • SPA
    nuxt -s

  注:如build命令：nuxt build -s或nuxt build -u

SPA模式

在普通的Web应用程序中，当用户请求http://myapp.com/about-us服务器正常返回时about-us.html

如图，在单页应用程序中，任何路由请求将会执行如下操作：

• 下载index.html
• 下载Vue应用程序JavaScript
• 初始化Vue应用
• 初始化Vue Router并路由到适当的组件
• 进行API调用以获取要呈现的数据
• 渲染页面

SPA应用初始加载速度可能很慢，一旦加载完成后，速度很快

Universal(SSR/SSG)模式

对于 Vue/React 来说，对于它们的 SSR/SSG 框架出现的原因就是主要就是 SEO 和首屏加载速度

• SSR(服务端渲染)
  服务端渲染是指客户端向服务器发出请求，然后运行时动态生成 html 内容并返回给客户端

  
  

  如上图，使用Universal模式，任何路由请求(未启动Vue)将会执行如下操作：

  • 在服务器端渲染请求的页面
  • 浏览器得到新页面并新页面显示
  • 请求JavaScript文件
  • 启动Vue，页面基本变成了常规的SPA

  路由
  

  

  如上图，在浏览器中启动Vue之后，路由操作如下：

  • 发出了一个JavaScript请求，以仅继承呈现/about-us页面组件所需的JavaScript
  • 进行API调用以获取要呈现的数据
  • 渲染页面

  注:Nuxt默认使用代码拆分功能，并将每个页面拆分为不同的JavaScript文件，这些文件仅在需要时才加载。这样，我们的应用程序就不会预先下载可能加载或可能从未加载的大量组件代码

• SSG(静态网站渲染)
  静态网站渲染是在构建时执行的，当发出请求时，直接将html发送回客户端

• 总结
  通常来说，静态网站渲染在运行时会更快，因为不需要服务端做处理，但缺点是对数据的任何更改都需要在服务端进行完全重建；而服务端渲染则会动态处理数据，不需要进行完全重建

例子

• layouts/default.vue

  <template>
    <div id="app">
      <nuxt-link to="/">首页</nuxt-link>
      <nuxt-link to="/create">create</nuxt-link>
      <Nuxt />
    </div>
  </template>
  
  <style>
  </style>
  

  注:路由匹配到的组件将在<Nuxt />显示 。同<router-view />
• pages/index.vue

  <template>
    <div>
      <h1>index</h1>
    </div>
  </template>
  
  <script>
  export default {}
  </script>
  
  <style>
  
  </style>
  

• pages/create.vue

  <template>
    <div>
      <h1>create</h1>
    </div>
  </template>
  
  <script>
  export default {}
  </script>
  
  <style>
  
  </style>
  

• 运行

  nuxt build
  nuxt start
  

  build输出内容如下
  
  

• 禁用JavaScript
  如图禁用JavaScript，会发现初始页面HTML完全呈现了页面。即使没有Vue，HTML页面也会快速呈现

  
  
• 智能预加载(Smart Prefetching)
  Nuxt 2.4中发布了Nuxt.js的一项新功能，称为智能预加载(Smart Prefetching)，该功能与通用模式结合使用，可提供更好的用户体验。有了此功能（默认情况下处于启用状态），<nuxt-link>当这些链接在视口中可见时，Nuxt.js会自动预取与之链接的代码分割页面。nuxtlink
  
  如上图的视频中，在点击create之前，已经预加载9acb22e.js(create.js)。现在进入/create可立即执行JavaScript，而不必等待网络请求

• 查看已编译模板
  如果检查发送过来的文件，就会看到编译模板所生成的DOM，如图

  
  
• 预加载规则
  Nuxt.js仅在浏览器不忙时加载资源，如果连接处于脱机状态或只有2g连接，则跳过预取。
  手动控制
  • 禁用特定链接的预加载

    <NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
    <NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>
    

  • 全局禁用预加载

    export default {
      router: {
        prefetchLinks: false
      }
    }
    

  这是指定某个为预加载添加prefetch即可

  <NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>