服務端預渲染之Nuxt（介紹篇）

時間 2019-11-11

標籤服務渲染 nuxt 介紹简体版

原文原文鏈接

如今前端開發通常都是先後端分離，mvvm和mvc的開發框架，如Angular、React和Vue等，雖然寫框架可以使咱們快速的完成開發，可是因爲先後臺分離，給項目SEO帶來很大的不便，搜索引擎在檢索的時候是在網頁中爬取數據，因爲單頁面應用讀取到的頁面是幾乎空白的，沒法爬取到任何數據信息。javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <meta name=viewport content="width=device-width,initial-scale=1">
        <title>authorization_web</title>
    </head>
<body>
    <div id=app></div>
</body>
</html>

如上代碼，單頁面應用查看源代碼的時候如上所示，因此搜索引擎沒法爬取到任何信息，搜索引擎會認爲當前頁面爲一個空頁面。爲了解決SEO問題，推出了SSR服務端預渲染，以便提升對SEO優化。css

什麼是SSR

在認識SSR以前，首先對CSR與SSR之間作個對比。html

首先看一下傳統的web開發，傳統的web開發是，客戶端向服務端發送請求，服務端查詢數據庫，拼接HTML字符串（模板），經過一系列的數據處理以後，把整理好的HTML返回給客戶端,瀏覽器至關於打開了一個頁面。這種好比咱們常常據說過的jsp,PHP,aspx也就是傳統的MVC的開發。前端

SPA應用，到了Vue、React，單頁面應用優秀的用戶體驗，逐漸成爲了主流，頁面總體式javaScript渲染出來的，稱之爲客戶端渲染CSR。SPA渲染過程。由客戶端訪問URL發送請求到服務端，返回HTML結構（可是SPA的返回的HTML結構是很是的小的，只有一個基本的結構，如第一段代碼所示）。客戶端接收到返回結果以後，在客戶端開始渲染HTML，渲染時執行對應javaScript，最後渲染template，渲染完成以後，再次向服務端發送數據請求，注意這裏時數據請求，服務端返回json格式數據。客戶端接收數據，而後完成最終渲染。vue

SPA雖然給服務器減輕了壓力，可是也是有缺點的：java

首屏渲染時間比較長：必須等待JavaScript加載完畢，而且執行完畢，才能渲染出首屏。
SEO不友好：爬蟲只能拿到一個div元素，認爲頁面是空的，不利於SEO。

爲了解決如上兩個問題，出現了SSR解決方案，後端渲染出首屏的DOM結構返回，前端拿到內容帶上首屏，後續的頁面操做，再用單頁面路由和渲染，稱之爲服務端渲染(SSR)。node

SSR渲染流程是這樣的，客戶端發送URL請求到服務端，服務端讀取對應的url的模板信息，在服務端作出html和數據的渲染，渲染完成以後返回html結構，客戶端這時拿到的以後首屏頁面的html結構。因此用戶在瀏覽首屏的時候速度會很快，由於客戶端不須要再次發送ajax請求。並非作了SSR咱們的頁面就不屬於SPA應用了，它仍然是一個獨立的spa應用。webpack

SSR是處於CSR與SPA應用之間的一個折中的方案，在渲染首屏的時候在服務端作出了渲染，注意僅僅是首屏，其餘頁面仍是須要在客戶端渲染的，在服務端接收到請求以後而且渲染出首屏頁面，會攜帶着剩餘的路由信息預留給客戶端去渲染其餘路由的頁面。ios

Nuxt.js 介紹

在Nuxt官方網站有一句這樣的話：Nuxt.js預設了使您開發Vue.js應用程序所需的全部配置。Nuxt是一個基於Vue.js的通用應用框架。經過對客戶端/服務端基礎框架的抽象組織，Nuxt主要關注的是應用的ui渲染。web

經過上面的這些介紹能夠簡單的得出：

Nuxt不只僅用於服務端渲染也能夠用於SPA應用的開發
利用Nuxt提供的項目結構、異步數據加載，中間件的支持，佈局等特性可大幅提高開發效率
Nuxt可用於網站靜態化，可使用命令將整個網頁打包成靜態頁面，使SEO更加友好

Nuxt.js 特性

基於Vue
自動代碼分層
服務端渲染
強大的路由功能，支持異步數據
靜態文件服務
EcmaScript6和EcmaScript7的語法支持
打包和壓縮JavaScript和Css
HTML頭部標籤管理
本地開發支持熱加載
集成ESLint
支持各類樣式預編譯器SASS、LESS等等
支持HTTP/2推送

Nuxt 渲染流程

一個完整的服務器請求到渲染的流程

經過上面的流程圖能夠看出，當一個客戶端請求進入的時候，服務端有經過nuxtServerInit這個命令執行在Store的action中，在這裏接收到客戶端請求的時候，能夠將一些客戶端信息存儲到Store中，也就是說能夠把在服務端存儲的一些客戶端的一些登陸信息存儲到Store中。以後使用了中間件機制，中間件其實就是一個函數，會在每一個路由執行以前去執行，在這裏能夠作不少事情，或者說能夠理解爲是路由器的攔截器的做用。而後再validate執行的時候對客戶端攜帶的參數進行校驗，在asyncData與fetch進入正式的渲染週期，asyncData向服務端獲取數據，把請求到的數據合併到Vue中的data中，

Nuxt說明

Nuxt安裝：

確保安裝了npx（npx在NPM版本5.2.0默認安裝了）：

npx create-nuxt-app <項目名>

安裝嚮導：

Project name                                //  項目名稱
Project description                         //  項目描述
Use a custom server framework               //  選擇服務器框架
Choose features to install                  //  選擇安裝的特性
Use a custom UI framework                   //  選擇UI框架
Use a custom test framework                 //  測試框架
Choose rendering mode                       //  渲染模式
    Universal                                   //  渲染全部鏈接頁面
    Single Page App                             //  只渲染當前頁面

這些都是比較重要的其餘的配置內容就不作介紹了，一路回車便可。

目錄結構介紹

assets              //  存放素材(須要執行webpack預處理操做)
components          //  組件
layouts             //  佈局文件
static              //  靜態文件(不須要webpack預處理操做)
middleware          //  中間件
pages               //  全部頁面
plugins             //  插件
server              //  服務端代碼
store               //  vuex

配置文件

const pkg = require('./package')
module.exports = {
  mode: 'universal',    //  當前渲染使用模式
  head: {       //  頁面head配置信息
    title: pkg.name,        //  title
    meta: [         //  meat
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [     //  favicon，若引用css不會進行打包處理
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#fff' },   //  頁面進度條
  css: [    //  全局css（會進行webpack打包處理）
    'element-ui/lib/theme-chalk/index.css'  
  ],
  plugins: [        //  插件
    '@/plugins/element-ui'
  ],
  modules: [        //  模塊
    '@nuxtjs/axios',
  ],
  axios: {},
  build: {      //  打包
    transpile: [/^element-ui/],
    extend(config, ctx) {       //  webpack自定義配置
    }
  }
}

Nuxt運行命令

{
  "scripts": {
    //  開發環境
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    //  打包
    "build": "nuxt build",
    //  在服務端運行
    "start": "cross-env NODE_ENV=production node server/index.js",
    //  生成靜態頁面
    "generate": "nuxt generate"
  }
}