第一章 Nuxt.js 簡(jiǎn)介
官網(wǎng)：https://zh.nuxtjs.org/
需求分析
- 采用 vue.js 開(kāi)發(fā)的應(yīng)用系統(tǒng)SEO不友好监署，需要解決SEO的問(wèn)題
- 比如：新聞門(mén)戶、博客系統(tǒng)有SEO的需求，希望被搜索引擎收錄，百度排名靠前等。
了解搜索引擎優(yōu)化 SEO
利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名。目的是讓其在行業(yè)內(nèi)占據(jù)領(lǐng)先地位，獲得品牌收益饵隙。很大程度上是網(wǎng)站經(jīng)營(yíng)者的一種商業(yè)行為，將自己或自己公司的排名前移沮脖。
采用什么技術(shù)可以利于 SEO 呢金矛？下面要先理解服務(wù)端渲染和客戶端渲染
服務(wù)端渲染和客戶端渲染（SSR）
什么是客戶端渲染
- 瀏覽器（客戶端）通過(guò) AJAX 向服務(wù)端(java servlet)發(fā)送 http請(qǐng)求數(shù)據(jù)接口。
- 服務(wù)端將獲取的接口數(shù)據(jù)封裝成 JSON 勺届，響應(yīng)給瀏覽器绷柒。
- 瀏覽器拿到JSON就進(jìn)行渲染html頁(yè)面，生成DOM元素涮因，然后將頁(yè)面展示給用戶废睦。
客戶端渲染特點(diǎn)：
- 服務(wù)端只響應(yīng)數(shù)據(jù)，不生成 html 頁(yè)面
- 瀏覽器（客戶端）負(fù)責(zé)發(fā)送請(qǐng)求獲取服務(wù)端的數(shù)據(jù)养泡，然后渲染成 html 頁(yè)面嗜湃。
什么是服務(wù)端渲染（SSR）
- 瀏覽器（客戶端）向服務(wù)端(java servlet)發(fā)送 http請(qǐng)求數(shù)據(jù)接口。
- 服務(wù)端 （servlet ）會(huì)生成html頁(yè)面澜掩，響應(yīng)給瀏覽器购披。
- 瀏覽器直接將接收到html頁(yè)面進(jìn)行展示。
服務(wù)端渲染特點(diǎn)： - 服務(wù)端只響應(yīng)數(shù)據(jù)肩榕，不生成 html 頁(yè)面
- 瀏覽器（客戶端）負(fù)責(zé)發(fā)送請(qǐng)求獲取服務(wù)端的數(shù)據(jù)刚陡，然后渲染成 html 頁(yè)面惩妇。
為什么使用服務(wù)器端渲染（SSR）
與傳統(tǒng)的SPA（單頁(yè)面應(yīng)用程序）相比，服務(wù)端渲染的優(yōu)勢(shì)主要有哪些：
- 更好的 SEO筐乳，由于搜索引擎爬蟲(chóng)抓取工具可以直接查看完全渲染的頁(yè)面歌殃。
- 更快的內(nèi)容到達(dá)時(shí)間（首屏加載更快）因?yàn)榉?wù)端只需要返回渲染好的HTML，這部分代碼量很小的蝙云，所以
用戶體驗(yàn)更好氓皱。
權(quán)衡之處：
- 開(kāi)發(fā)成本比較高，比如某些聲明周期鉤子函數(shù)（如beforeCreate勃刨、created）能同時(shí)運(yùn)行在服務(wù)端和
客戶端波材，因此第三方庫(kù)要做特殊處理，才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行身隐。 - 由于服務(wù)端渲染要用Nodejs做中間層廷区，所以部署項(xiàng)目時(shí)，需要處于Node.js server運(yùn)行環(huán)境贾铝。在高流量環(huán)境
下躲因，還要做好服務(wù)器負(fù)載和緩存策略。
Vue.js 如何實(shí)現(xiàn) SSR
- 基于官方Vue SSR指南文檔的官方方案忌傻，官方方案具有更直接的控制應(yīng)用程序的結(jié)構(gòu)，更深入底層搞监，更加靈活水孩，同時(shí)在使用官方方案的過(guò)程中，也會(huì)對(duì)Vue SSR有更加深入的了解琐驴。
- vue.js 通用應(yīng)用框架 NUXT 俘种， NUXT 提供了平滑的開(kāi)箱即用的體驗(yàn)，它建立在同等的 Vue.js 技術(shù)棧之上绝淡，但抽象出很多模板宙刘，并提供了一些額外的功能，例如靜態(tài)站點(diǎn)生成牢酵。通過(guò)NUXT可以根據(jù)約定的規(guī)則悬包，快速的實(shí)現(xiàn)Vue SSR。
什么是 Nuxt.js
- Nuxt.js是一個(gè)基于Vue.js的通用應(yīng)用框架
- 通過(guò)對(duì) 客戶端/服務(wù)端 基礎(chǔ)框架的抽象組織馍乙，Nuxt.js主要關(guān)注的是應(yīng)用的UI渲染
- Nuxt.js的目標(biāo)是創(chuàng)建一個(gè)靈活的應(yīng)用框架布近，你可以基于它初始化新項(xiàng)目的基礎(chǔ)代碼結(jié)構(gòu)
- 作為框架Nuxt.js為 客戶端/服務(wù)端 這種典型的應(yīng)用架構(gòu)模式提供了許多有用的新特性
為什么要使用 Nuxt.js
主要是為了實(shí)現(xiàn)服務(wù)端的渲染（SSR），利用Nuxt.js的服務(wù)端渲染來(lái)解決 Vue 項(xiàng)目的 SEO
Nuxt.js 工作原理
- 瀏覽器（客戶端）發(fā)送 http 請(qǐng)求到 Node.js 服務(wù)端
- 部署在 Node.js 的應(yīng)用 Nuxt.js 接收到瀏覽器請(qǐng)求丝格，會(huì)去請(qǐng)求后臺(tái)接口服務(wù)端
- 后臺(tái)接口服務(wù)端會(huì)響應(yīng) JSON 數(shù)據(jù)撑瞧，Nuxt.js 獲取數(shù)據(jù)后進(jìn)行服務(wù)端渲染成 html 。
- 然后 Nuxt.js 將 html 頁(yè)面響應(yīng)給瀏覽器显蝌。
- 瀏覽器直接將接收到html頁(yè)面進(jìn)行展示
Nuxt.js 使用了 vue.js + webpack + babel 三大技術(shù)架構(gòu)预伺，集成了 Vue.js 中以下組件/框架，用于開(kāi)發(fā)完整而強(qiáng)大的Web 應(yīng)用：
- Vue 2
- Vue-Router
- Vuex (當(dāng)配置了 Vuex 狀態(tài)樹(shù)配置項(xiàng) 時(shí)才會(huì)引入)
- Vue 服務(wù)器端渲染 (排除使用 mode: 'spa' )
- Vue-Meta
壓縮并 gzip 后，總代碼大小為：57kb （如果使用了 Vuex 特性的話為 60kb）酬诀。
另外脏嚷，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 來(lái)處理代碼的自動(dòng)化構(gòu)建工作（如打包料滥、代碼分層然眼、壓縮等等）。
Nuxt 生命周期流程圖分析
image.png
