服務端渲染和nuxt簡單介紹

概述

最近研究了一下服務端渲染，有一些心得，記錄下來供之後開發時參考，相信對其餘人也有用。

參考資料：

Vue SSR指南

nuxt.js官網

服務端渲染介紹

服務端渲染簡單來講，就是分別對項目用webpack打包2次，一次生成vue-ssr-server-bundle.json，一次生成vue-ssr-client-manifest.json和其它靜態文件，最後用node搭一個服務器接收這2個json文件進行組裝，併發送給用戶。其中有如下幾點須要注意：

1.工廠函數

咱們須要對vue, vue-router, vuex用一個工廠函數包裹起來，進行延遲執行。緣由是node server每次會接受不少http請求，而vue卻只有一個示例，若是在打包前把實例先初始化的話，之後的每次請求就會發送同一個實例，形成交叉請求狀態污染 (cross-request state pollution)。示例以下：

// app.js
const Vue = require('vue')

module.exports = function createApp (context) {
  return new Vue({
    data: {
      url: context.url
    },
    template: `<div>訪問的 URL 是： {{ url }}</div>`
  })
}

2.服務端渲染的生命週期

在全部vue的生命週期鉤子函數中，beforeCreate 和 created 會在服務端渲染的時候被調用，其它生命週期會在客戶端執行。

因此咱們在 beforeCreate 和 created 這2個生命週期內不能訪問this，也不能訪問window，更不能訪問組件實例等。通常咱們在 beforeCreate 和 created 中會作的事情有：發送http請求事先填充store，鑑權，發送http請求初始化組件data等。咱們在客戶端進行初始化的http請求都須要移動到 mounted 或者 beforeMount 生命週期中。

3.axios

咱們發送http請求的庫推薦使用axios。又由於axios不只會用在客戶端發送http請求，還會用在服務端發送http請求，因此在給axios設置攔截器的時候須要當心使用和window或者dom相關的方法。

4.HTML結構

由於vue的服務端渲染主要是由vue-server-renderer庫完成的，它在解析html標籤的時候會有一些坑，就是html結構須要很嚴格的書寫，至少要作到如下2點：

1. 不要漏寫結束標籤。
2. p標籤裏面不能使用塊級標籤，若是非要使用的話，須要把p標籤換成div標籤。

5.緩存

咱們通常給node server使用 micro-caching 緩存策略：讓 node server 把動態內容儲存1秒，也就是說不管這一秒有多少請求，node server 只會生成一次動態內容。這個是經過LRU庫來實現的。另外還有組件級別的緩存，這裏就很少說了。

nuxt.js

1.yarn

雖然nuxt項目能夠用npm運行，可是仍然推薦使用yarn來運行此項目，步驟以下：

先檢查電腦中是否有homebrew:

$ brew -v

若是有homebrew的話跳過此步，沒有的話使用如下命令安裝：

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

最後使用homebrew安裝yarn:

$ brew install yarn

這裏是npm和yarn的對照：

• npm install === yarn
• npm run dev === yarn run dev
• npm init === yarn init
• npm install <package> === yarn add <package>
• npm uninstall <package> === yarn remove <package>
• npm update <package> === yarn upgrade <package>

2.指令

# 安裝全部依賴包
$ yarn

# 安裝某個依賴包
$ yarn add <package>

# 打開開發環境
$ yarn dev

# 正式環境
$ yarn build
$ yarn start

# 開發環境下重啓服務(很重要)
$ 輸入rs 再按回車鍵

# 自動修復eslint錯誤
$ yarn lint

# 生成可視化依賴圖（至關於vue-cli3的vue inspect指令）
$ yarn analyze

3.在開發的時候須要注意以下幾點：

1. eslint在一些方面比其它項目更加嚴格，按報錯提示修改就能夠了。（這些方面我沒有改爲和其它項目同樣是由於我以爲這些習慣很好）
2. 靜態資源放在static文件夾裏面，svg雪碧圖放在assets/sprite/文件夾裏面。
3. 文件夾名字不能改。（nuxt.js自己要求）
4. 其它好比pages文件夾裏面每一個文件就是一個路由，能夠看nuxt.js官方文檔。