Nuxt --- 也來講說vue服務端渲染

Nuxt

隨着如今vue和react的流行，許多網站都作成了SPA，確實提高了用戶體驗，但SPA也有兩個弱點，就是SEO和首屏渲染速度。爲了解決單頁應用的痛點，基於vue和react的服務端渲染應運而生。因爲公司的框架採用的是vue，因此就簡單的研究了一下基於vue的服務端渲染框架——NUXT。在vue的官網有關於服務端渲染的詳細介紹，而NUXT集成了利用Vue開發服務端渲染的應用所須要的各類配置，也集成了Vue二、vue-router、vuex、vux-meta（管理頁面meta信息的），利用官方的腳手架，基本上是傻瓜式操做，不用寫路由配置，不用寫webpcak配置就能夠跑起來一個基於服務端渲染的SPA。

Nuxt特性

NUXT的特性包括：

• 基於 Vue.js
• 自動代碼分層
• 服務端渲染
• 強大的路由功能，支持異步數據
• 靜態文件服務
• ES6/ES7 語法支持
• 打包和壓縮 JS 和 CSS
• HTML頭部標籤管理
• 本地開發支持熱加載
• 集成ESLint
• 列表項目
• 支持各類樣式預處理器： SASS、LESS、 Stylus等等

Nuxt目錄結構

經過vue init nuxt-community/starter-template <project-name>生成的文件目錄結構以下：

其中有一些目錄（layouts、pages、static、store、nuxt.config.js、package.json）是Nuxt保留的，不能夠更改，須要注意一下。

Nuxt路由

Nuxt中的一大特色就是路由無需手動配置，會根據pages下的文件路徑自動生成一套路由。若是路由中須要帶參數，只需將pages下的文件已下劃線_做爲前綴便可。例如pages下的目錄結構以下：

pages/
--| user/
-----| index.vue
-----| one.vue
-----| _id.vue
--| index.vue

Nuxt自動生成的路由配置爲：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
  ]
}

而在vue文件中能夠針對路由的參數進行校驗，例如在pages/users/_id.vue文件中

export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

若是校驗方法返回的值不爲 true， Nuxt 將自動加載顯示 404 錯誤頁面。而這個錯誤頁面須要寫在指定的位置，也就是layout中error頁面。接下來就來介紹有關視圖相關的東西。

Nuxt視圖

能夠在layouts目錄下建立自定義的佈局，能夠經過更改 layouts/default.vue 文件來擴展應用的默認佈局。須要在佈局文件中添加 <nuxt/> 組件用於顯示頁面的主體內容，感受跟vue中的slot方法相似。例如在默認佈局中增長header和footer，這樣每一個頁面都會加上header和footer。

<template>
  <div>
    <header>VUE SRR DEMO</header>
    <nuxt/>
    <footer>COPYRIGHT LXY</footer>
  </div>
</template>

而上面說到的error頁面，能夠經過在layouts下增長error.vue文件來修改默認的錯誤頁面。該頁面能夠接受一個error參數。

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">頁面不存在</h1>
    <h1 v-else>應用發生錯誤異常</h1>
    <p class="goback">
      <nuxt-link to="/">返回首頁</nuxt-link>
    </p>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'self-aside'
}
</script>

也能夠給某個頁面指定特定的模板，作到個性化佈局。例如在上面的error頁面中，我指定了一個self-aside的模板

以上所說的都是有關佈局和路由相關的東西，而尚未講到有關服務端渲染的知識，究竟 Nuxt 是如何作到SSR的呢，關鍵人物要出場了。

Nuxt asyncData 方法

Nuxt 擴展了 Vue.js，增長了一個叫 asyncData 的方法，使得咱們能夠在設置組件的數據以前能異步獲取或處理數據。這個函數可了不起了，有了它，咱們能夠先從服務員拿到數據，在服務端解析好，拼成HTML字符串，返回給瀏覽器。

asyncData方法會在組件每次加載以前被調用，它能夠在服務端或路由更新以前被調用。 能夠利用 asyncData方法來獲取數據，Nuxt 會將 asyncData 返回的數據融合組件 data 方法返回的數據一併返回給當前組件。這個方法只能用在頁面組件中，在componets下在公共組件是不能調用該方法的，Nuxt 不會擴展加強該目錄下 Vue 組件。

由於 asyncData 方法是在組件 初始化 前被調用的，因此在方法內是沒有辦法經過 this 來引用組件的實例對象。

async asyncData ({ params, error }) {
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
    return { 
      users: data.slice(0,5)
    }
  },

上面demo中asyncData返回的數據賦值給了users，這樣我就能夠在頁面中像使用data裏的數據同樣去使用users，例如我在template下循環出users

<ul>
    <li v-for="item in users" :key="item.name">{{item.name}}</li>
 </ul>

我如今去查看源代碼，發現頁面中li中的數據已經渲染過來了，也就是達到了服務端渲染。

附一張Nuxt渲染的流程圖：

項目源碼地址：https://github.com/CuteSunLee...

總結

總體感受Nuxt仍是很好上手的，利用腳手架，看看官方文檔，寫寫demo，大體就能瞭解整個流程。但其中的具體實現細節，還須要去認真看看 https://ssr.vuejs.org/zh/