📒博客首頁：酸狗的博客🍋
🎉歡迎關注🔎點贊👍收藏??留言📝
💖熱愛前端學習，期待一起交流！?
🙏作者水平很有限，如果發現錯誤，求告知，多謝！🌈
😎有問題可私信我交流🙄

?什么是服務端渲染

🎉SEO

即 搜索引擎優化（Search Engine Optimization），它是指通過站內優化，如：網站結構調整、網站內容建設、網站代碼優化以及站外優化等方法，來進行搜索引擎優化，

簡單說： 通過各種技術（手段）來確保，你的Web內容被搜素引擎最大化收錄，最大化提高權重，帶來更多流量，目前SEO；流量是變現的快車道，SEO 是低成本獲取流量的最佳方法，

🎈SPA

即 單頁 Web 應用（single page web application，SPA），就是只有一張 Web 頁面的應用，是加載單個 HTML 頁面并在用戶與應用程式互動時動態更新該頁面的 Web 應用程式

簡單說： Web 不再是一張張頁面，而是一個整體的應用，一個由路由系統、資料系統、頁面（組件）系統…組成的應用程式，其中路由系統是非必須的，

大部分的 Vue 專案，本質是 SPA 應用，Angular.js、Angular、Vue、React…還有最早的”Pjax”均如此，

SPA 時代，主要是在Web端使用了history或hash（主要是為了低版本瀏覽器的兼容）API，在首次請求經服務端路由輸出整個應用程式后，接下來的路由都由前端掌控了，前端通過路由作為中心樞紐控制一系列頁面（組件）的渲染加載和資料互動，

而上面所述的各類框架則是將以：路由、資料、視圖為基本結構進行的規范化的封裝，

最早的 SPA 應用，由 Gmail、Google Docs、Twitter 等大廠產品實踐布道，廣泛用于對SEO要求不高的場景中，

?SSR

服務端渲染又稱SSR (Server Side Render)是在服務端完成頁面的內容，而不是在客戶端通過AJAX獲取資料，

與傳統 SPA（Single-Page Application - 單頁應用程式）相比，服務器端渲染(SSR)的優勢主要在于：更好的 SEO，由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面，

請注意，截至目前，Google 和 Bing 可以很好對同步 JavaScript 應用程式進行索引，在這里，同步是關鍵，如果你的應用程式初始展示 loading 徑訓圖，然后通過 Ajax獲取內容，抓取工具并不會等待異步完成后再行抓取頁面內容，也就是說，如果 SEO 對你的站點至關重要，而你的頁面又是異步獲取內容，則你可能需要服務器端渲染(SSR)解決此問題，

更快的內容到達時間(time-to-content)，特別是對于緩慢的網路情況或運行緩慢的設備，無需等待所有的 JavaScript 都完成下載并執行，才顯示服務器渲染的標記，所以你的用戶將會更快速地看到完整渲染的頁面，通常可以產生更好的用戶體驗，并且對于那些「內容到達時間(time-to-content)與轉化率直接相關」的應用程式而言，服務器端渲染(SSR)至關重要，

😐為什么要使用SSR應用？

為什么要SSR，為了體驗，還有SEO，
首先，用戶可能在網路比較慢的情況下從遠處訪問網站 - 或者通過比較差的帶寬， 這些情況下，盡量減少頁面請求數量，來保證用戶盡快看到基本的內容，
可以用Webpack的代碼拆分避免強制用戶下載整個單頁面應用，但是，這樣也遠沒有下載個單獨的預先渲染過的 HTML 檔案性能高，
對于世界上的一些地區人，可能只能用1998年產的電腦訪問互聯網的方式使用計算機，
而 Vue 只能運行在 IE9 以上的瀏覽器，你可能也想為那些老式瀏覽器提供基礎內容 - 或者是在命令列中使用 Lynx 的時髦的黑客，
在大部分的商業應用中，我們有 SEO 的需求，我們需要搜索引擎更多地抓取到我們的內容，更詳細地認識到我們的網頁結構，而不是僅對首頁或特定靜態頁進行索引，這是 SSR 最重要的意義，
簡單說就是，我們需要搜素引擎看到這樣的代碼：

而不是這樣的代碼：

且，我們還需要在 SSR 的基礎上實作 SPA，即：首屏渲染，
基本流程是：
在瀏覽器第一次訪問某個 URI 資源的時候（首屏），Web 服務器根據路由拿到對應資料渲染并輸出，且輸出的資料中包含兩部分：

路由頁對應的頁面及已渲染好的資料
完整的SPA程式代碼

在客戶端首屏渲染完成之后，此時我們看到的其實已經是一個和之前的 SPA 相差無幾的應用程式了，接下來我們進行的任何操作都只是客戶端的應用進行互動，

頁面/組件由Web端渲染，路由也由瀏覽器控制，用戶只需要和當前瀏覽器內的應用打交道就可以了，

之前在各大 SPA 框架還未正式官方支持 SSR 時，有一些第三方的解決方案，如：prerender.io，

它們做的事情就是建立HTTP一個中間層，在判斷到訪問來源是蜘蛛時，輸出已快取好的html資料，此資料若不存在，則呼叫第三方服務對 html 進行快取，往復進行，

另一方法是自行構建蜘蛛渲染邏輯，當識別 UA 為搜索引擎時，拿服務端已準備好的模板和資料進行渲染輸出 html 資料，反之，則輸出 SPA 應用代碼；
我當時也考慮過此方法，但有很多弊端，如：

需要針對蜘蛛撰寫一套獨立的渲染模板，因為大部分情況下 SPA 的代碼是沒法直接在服務端使用的
搜索引擎若檢測到蜘蛛抓取資料和真實訪問資料不一致，會做降權懲罰，也就意味著渲染模板還必須和SPA預期輸出一模一樣

所以，最好的方法是 SPA 能和服務端使用同一套模板，且使用同一個服務端邏輯分支，再簡單說：最好 Vue、Ng2… 能直接在服務端跑起來，
于是，陸續誕生了基于 React 的Next.js、基于 Vue 的Nuxt.js、Ng2 誕生之日便支持，
沒錯，Nuxt.js 就是今天的主角🤣，

🙄什么是NUXT

Nuxt.js 是一個基于 Vue.js 的輕量級應用框架,可用來創建服務端渲染 (SSR) 應用,也可充當靜態站點引擎生成靜態站點應用,具有優雅的代碼結構分層和熱加載等特性，

官方檔案：NuxtJS

官方是這么介紹自己的：
Nuxt.js 是一個基于 Vue 的通用應用框架，
通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染，

我們的目標是創建一個靈活的應用框架，你可以基于它初始化新專案的基礎結構代碼，或者在已有 Node.js 專案中使用 Nuxt.js，
Nuxt.js 預設了利用 Vue 開發服務端渲染的應用所需要的各種配置，

除此之外，我們還提供了一種命令叫：nuxt generate，為基于 Vue 的應用提供生成對應的靜態站點的功能，

我們相信這個命令所提供的功能，是向開發集成各種微服務（miscroservices）的 Web 應用邁開的新一步，
作為框架，Nuxt.js 為 客戶端/服務端 這種典型的應用架構模式提供了許多有用的特性，例如異步資料加載、中間件支持、布局支持等，

Nuxt.js是使用 Webpack 和 Node.js 進行封裝的基于Vue的SSR框架，使用它，你可以不需要自己搭建一套 SSR 程式，而是通過其約定好的檔案結構和API就可以實作一個首屏渲染的 Web 應用，

之所以叫 Nuxt.js 也是因為受到了 Next.js 的啟發，
作者是法國的兄弟倆，EvenYou 在微博多次提到，也在歐洲見過哥倆，

在此之前，國內有一些對 Vue SSR 的整合嘗試，但都沒有成功，主要在于 Webpack 和 Node 的結合上沒有實踐出最佳方案，
當我看到 Nuxt.js 以約束檔案夾和組態檔nuxt.config.js的方式來管理多個程式組件之間的關系時，就覺得，很酷！

首先，Nuxt.js 是一個 Node 程式，就像上面說的，我們是要把 Vue 跑在服務端，所以必須使用 Node 環境，

我們對 Nuxt.js 應用的訪問，實際上是在訪問這個 Node.js 程式的路由，程式輸出首屏渲染內容 + 用以重新渲染的 SPA 的腳本代碼，而路由是由 Nuxt.js 約定好的 pages 檔案夾生成的，

所以，整體上，Nuxt.js 通過各個檔案夾和組態檔的約束來管理我們的程式，而又不失擴展性，其有自己的插件機制，

📐NUXT環境搭建

（1）我們從網站上下載模板的壓縮包 starter-template-master.zip 解壓，修改template目錄目錄的package.json中的名稱

（2）在命令提示符下進入該目錄下的template目錄

（3）安裝ESLint（js檢測插件）：可以講之前做過的.eslintrc.js組態檔復制到當前專案下，這個組態檔就是這個插件的組態檔

（4）修改package.json中的：name、description、author （必須修改，否則無法安裝）

 "name": "專案名",
 "version": "1.0.0",
 "description": "專案的描述",
 "author": "作者",

（5）修改nuxt.config.js：修改title: ‘{{ name }}’、content: ‘{{escape description }}’，這里的設定最后會顯示在頁面標題欄和meta資料中

head: {
    title: '專案',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'keywords', name: 'keywords', content: 'JAVA' },
      { hid: 'description', name: 'description', content: '檸檬樹上的VUE' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
},

（6）初始化完即可安裝，運行

在終端中進入此專案目錄，在安裝其依賴：

npm install

（7）測驗運行：

npm run dev

📃NUXT目錄結構

（1）資源目錄 assets

用于組織未編譯的靜態資源如 LESS、SASS 或 JavaScript，

（2）組件目錄 components

用于組織應用的 Vue.js 組件，Nuxt.js 不會擴展增強該目錄下 Vue.js 組件，即這些組件不會像頁面組件那樣有 asyncData 方法的特性，

（3）布局目錄 layouts

用于組織應用的布局組件，

（4）頁面目錄 pages

用于組織應用的路由及視圖，Nuxt.js 框架讀取該目錄下所有的 .vue 檔案并自動生成對應的路由配置，

（5）插件目錄 plugins

用于組織那些需要在 根vue.js應用 實體化之前需要運行的 Javascript 插件，

（6）nuxt.config.js 檔案

nuxt.config.js 檔案用于組織Nuxt.js 應用的個性化配置，以便覆寫默認配置，

🧵 Nuxt定義布局

1. 復制靜態資源的存放目錄：

   將靜態原型中的css、img、js、photo目錄拷貝至assets目錄下
   將favicon.ico復制到static目錄下

2. 定義布局
   我們可以把頁頭和頁尾提取出來，形成布局頁
   修改layouts目錄下default.vue，從靜態頁面中復制首頁，修改了原始檔案中的資源路徑為~/assets/，將主內容區域的內容替換成

<template>
  <div>
    <!-- 頁頭部分 -->
      
    <!-- 內容的區域 -->
    <nuxt/>
      
    <!-- 頁尾部分 -->
  </div>
</template>

簡單來說的話 我們可以在這個default.vue的布局中在前后加入其相關的布局， 等于是Vue中相當于一個占位符，匹配到的組件就在這個位置開始展示，而nuxt對于開發來說自定了一套規則，我們按照其規則來使用的話就可以減少很多配置🧡，

💘動態路由

<template>
  <div>
    <!-- 頁頭部分 -->
      <ul class="nav">
            <router-link to="/" tag="li" active-class="current" exact>
              <a>首頁</a>
            </router-link>
            <router-link to="/course" tag="li" active-class="current">
              <a>分類</a>
            </router-link>
            <router-link to="/teacher" tag="li" active-class="current">
              <a>詳情</a>
            </router-link>
            <router-link to="/article" tag="li" active-class="current">
              <a>聊天</a>
            </router-link>
            <router-link to="/qa" tag="li" active-class="current">
              <a>我的</a>
            </router-link>
          </ul>
    <!-- 內容的區域 -->
    <nuxt/>
      
    <!-- 頁尾部分 -->
  </div>
</template>

• "/"這個路由默認是在pages檔案夾下的index.vue
• 比如我們要配置課程的路由，在pages下創建course，再在course目錄下創建index.vue就是其課程的展示頁面，如果需要傳遞引數，比如查看某課程，就要傳遞其課程的id，這樣我們就可以創建 _id.vue 這個組態檔；
  demo💫：
  首頁是地址是http://localhost:3000，點擊課程就是http://localhost:3000/course，其中切換只course檔案夾下的index.vue組件，在課程中點擊某個具體課程地址變成http://localhost:3000/course/1，此時其中切換只course檔案夾下的_id.vue組件,在_id.vue中就可以通過params.id將其取出

🎨資料渲染

（1）安裝axios，用于異步獲取資料

cnpm install axios ‐‐save

（2）asyncData異步加載資料的方法

<template>
<div>
活動串列
<div v‐for="(item,index) in items" :key="index" >{{item.name}}</div>
</div>
</template>
<script>
import axios from 'axios'
  export default {
    //asyncData：渲染組件之前異步獲取資料
    asyncData ({ params, error }) {
      return axios.get('http://localhost:3000/xxx/course')
        .then((response) => {
          console.log(response)// 在命令終端查看輸出
          return { items: response.data.data.items }
        })
    }
  }
</script>

👓總結

💢特性

• 基于 Vue.js
• Vue、Vue Router、Vuex、Vue SSR
• 自動代碼分層
• 服務端渲染
• 強大的路由功能，支持異步資料
• 靜態檔案服務
• ES2015+ 語法支持
• 打包和壓縮 JS 和 CSS
• HTML 頭部標簽管理
• 本地開發支持熱加載
• 集成 ESLint
• 支持各種樣式前處理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送