服務器端渲染(SSR)

知識儲備

• ES6
• Nodejs
• Vue
• React
• Angular

什么是服務器端渲染

• 前端渲染：html頁面作為靜態文件存在，前端請求時后端不對該文件做任何內容上的修改，直接以資源的方式返回給前端，前端拿到頁面后，根據寫在html頁面上的js代碼，對該html的內容進行修改。
• 服務端渲染：前端發出請求后，后端在將HTML頁面返回給前端之前，先把HTML頁面中的特定區域，用數據填充好，再將完整的HTML返回給前端。在SPA場景下，服務端渲染都是針對第一次get請求，它會完整的html給瀏覽器，瀏覽器直接渲染出首屏，用不著瀏覽器端多一個AJAX請求去獲取數據再渲染。

為什么使用服務器端渲染

優點：

• 更好的 SEO，因為傳統的搜索引擎只會從 HTML 中抓取數據，這會導致前端渲染的頁面無法被抓取。
• 更快的內容到達時間(time-to-content)，特別是對于緩慢的網絡情況或運行緩慢的設備 。頁面首屏時間大概有80%消耗在網絡上，剩下的時間在后端讀取數據以及瀏覽器渲染，顯然要優化后面的20%是比較困難的，優化網絡時間是效果最明顯的手段。傳統的Ajax請求是先請求js再由js發起數據請求，兩項時間再加上瀏覽器渲染時間才是首屏時間。而SSR能將兩個請求合并為一個。

缺點：

• 更多的服務器端負載。
• 服務器端和瀏覽器環境差異帶來的問題，例如document等對象找不到的問題。

如何選擇

建議：如果注重SEO的站點，非強交互的頁面，建議用SSR；像后臺管理頁面這類強交互的應用，建議使用前端渲染。

1. Nuxt.js服務器端渲染

學習目標

• 了解Nuxt.js的作用
• 掌握Nuxt.js中的路由
• 掌握layouts、pages以及components的區別
• 能夠在Nuxt.js項目中使用element-ui
• 掌握Nuxt.js中異步獲取數據的方式
• 完成小項目
• 掌握SEO的優化

1.1 Nuxt.js入門

1.1.1 什么是Nuxt.js

Vue服務端渲染官網

Nuxt.js官網

Nuxt.js 是一個基于 Vue.js 的通用應用框架。

1.1.2 第一個Nuxt應用程序

npm i create-nuxt-app -g create-nuxt-app my-nuxt-demo cd my-nuxt-demo npm run dev

1.1.3 文件結構分析

└─my-nuxt-demo├─.nuxt // Nuxt自動生成，臨時的用于編輯的文件，build├─assets // 用于組織未編譯的靜態資源如LESS、SASS或JavaScript,對于不需要通過 Webpack 處理的靜態資源文件，可以放置在 static 目錄中├─components // 用于自己編寫的Vue組件，比如日歷組件、分頁組件├─layouts // 布局目錄，用于組織應用的布局組件，不可更改?├─middleware // 用于存放中間件├─node_modules├─pages // 用于組織應用的路由及視圖,Nuxt.js根據該目錄結構自動生成對應的路由配置，文件名不可更改?├─plugins // 用于組織那些需要在 根vue.js應用 實例化之前需要運行的 Javascript 插件。├─static // 用于存放應用的靜態文件，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下。文件夾名不可更改。?└─store // 用于組織應用的Vuex 狀態管理。文件夾名不可更改。?├─.editorconfig // 開發工具格式配置├─.eslintrc.js // ESLint的配置文件，用于檢查代碼格式├─.gitignore // 配置git忽略文件├─nuxt.config.js // 用于組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置。文件名不可更改。?├─package-lock.json // npm自動生成，用于幫助package的統一設置的，yarn也有相同的操作├─package.json // npm 包管理配置文件├─README.md

1.2 頁面和路由

1.2.1 基本路由

Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置。

假設 pages 的目錄結構如下

└─pages├─index.vue└─user├─index.vue├─one.vue

那么，Nuxt.js 自動生成的路由配置如下：

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'}] }

1.2.2 頁面跳轉

不要寫成a標簽，因為是重新獲取一個新的頁面，并不是SPA

<nuxt-link to="/users"></nuxt-link>

this.$router.push('/users')

1.2.3 動態路由

• 在 Nuxt.js 里面定義帶參數的動態路由，需要創建對應的以下劃線作為前綴的 Vue 文件 或 目錄。
• 獲取動態參數{{$route.params.id}}

1.2.4 路由參數校驗

Nuxt.js 可以讓你在動態路由對應的頁面組件中配置一個validate方法用于校驗動態路由參數的有效性。該函數有一個布爾類型的返回值，如果返回true則表示校驗通過，如果返回false則表示校驗未通過。

validate(data) {cosole.log(data)return true }

1.2.5 嵌套路由

添加一個Vue文件，作為父組件

添加一個與父組件同名的文件夾來存放子視圖組件

在父文件中，添加組件，用于展示匹配到的子視圖

1.3 layouts & pages & components

1.3.1 創建layout

去layouts文件夾下面新建一個新的layout組件，例如teachers.vue，并在這個組件中添加組件，這樣，所有和teachers相關的頁面都會有公共的layout

給需要用到teachers.vue的組件添加layout屬性，并指定需要使用的layout，例如：layout: 'teachers'

1.3.2 創建特殊layout : error

layouts文件夾下面新建error.vue，error是關鍵字

1.3.3 新建一個組件

在components文件夾下面新建一個Header.vue組件
引入組件，注意路徑的~符號，表示根目錄
layout中也能使用組件

1.3.4 樣式配置

nuxt.config.js中設置全局css樣式的文件路徑

1.4 ElementUI使用

下載npm i element-ui -S

在plugins文件夾下面，創建ElementUI.js文件

import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI)

在nuxt.config.js中添加配置

css: ['element-ui/lib/theme-chalk/index.css' ], plugins: [{src: '~/plugins/ElementUI', ssr: true } ], build: {vendor: ['element-ui'] }

1.5 異步數據

Nuxt.js 擴展了 Vue.js，增加了一個叫 asyncData 的方法，使得我們可以在設置組件的數據之前能異步獲取或處理數據。asyncData方法會在組件(限于頁面組件)每次加載之前被調用。它可以在服務端或路由更新之前被調用。所以需要注意這個函數中不能使用this

注意：常規寫法如果在created鉤子中寫異步，是在客戶端渲染的而不是在服務端

使用方法：asyncData(context, callback) {callback(null, data)}

context.route.params.xxx獲取參數

callback(new Error(), data)渲染出錯的頁面

注意：這個方法在服務器端執行和在客戶端執行的區別

1.6 axios的使用

安裝npm install --save axios

使用

import axios from 'axios'asyncData(context, callback) {axios.get('http://localhost:3301/in_theaters').then(res => {console.log(res);callback(null, {list: res.data})}) }

為防止重復打包，在nuxt.config.js中配置

module.exports = {build: {vendor: ['axios']} }

nuxt中axios如何跨域獲取數據

• 參考文檔：https://axios.nuxtjs.org/
• 參考文檔：https://github.com/nuxt-community/proxy-module
• ajax 跨域問題
  • 首先推薦：CORS 處理跨域，只需要服務端做一些配置就好了，客戶端可以直接使用
  • 其次：配置服務端(任何Web服務器)代理
    • Apache
    • nginx
    • tomcat
    • Node
    • webpack 中的 webpack-dev-server
  • nuxt 中使用 axios 發請求
    • 配置 nuxt
    • nuxt 提供了一個模塊 @nuxtjs/axios
    • 這個模塊內置了 Node 的一個 http-proxy-middleware 中間件

1.7 小案例(豆瓣電影列表)

接口：

http://api.douban.com/v2/movie/top250

http://api.douban.com/v2/movie/top250?start=0&count=100

獲取電影列表：http://localhost:3301/in_theaters (in_theaters可以替換為coming_soon及top250)

獲取電影詳情：http://localhost:3301/in_theaters/1?_embed=details

http://localhost:3301/in_theatershttp://localhost:3301/coming_soonhttp://localhost:3301/top250http://localhost:3301/details

1.7.1 豆瓣電影首頁創建

1.7.2 豆瓣電影列表頁面創建

1.7.3 電影詳情頁面

1.8 SEO優化

1.8.1 全局

在nuxt.config.js配置文件中修改

head: {title: pkg.name,meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1' },{ hid: 'description', name: 'description', content: pkg.description }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] },

1.8.2 局部

head(){return{title:'豆瓣電影',meta:[{'name':'keywords','content': '電影、經典電影、熱映、電視劇、美劇、影評、電影院、電影票、排行、推薦'}]} }

總結

以上是生活随笔為你收集整理的NuxtJS快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。