1、 了解SEO

image.png

總結(jié)：seo是網(wǎng)站為了提高自已的網(wǎng)站排名，獲得更多的流量，對(duì)網(wǎng)站的結(jié)構(gòu)及內(nèi)容進(jìn)行調(diào)整優(yōu)化，以便搜索引擎（百度，google等）更好抓取到更優(yōu)質(zhì)的網(wǎng)站的內(nèi)容。

下圖是搜索引擎爬取網(wǎng)站頁面的大概流程圖：（搜索引擎的工作流程很復(fù)雜，下圖只是簡(jiǎn)單概括）

image.png

從上圖可以看到SEO是網(wǎng)站自己為了方便spider抓取網(wǎng)頁而作出的網(wǎng)頁內(nèi)容優(yōu)化，常見的SEO方法比如：
1）對(duì)url鏈接的規(guī)范化，多用restful風(fēng)格的url，多用靜態(tài)資源url；
2）注意title、keywords的設(shè)置。
3）由于spider對(duì)javascript支持不好，對(duì)于網(wǎng)頁跳轉(zhuǎn)用href標(biāo)簽。
。。。。。。

1.3 服務(wù)端渲染和客戶端渲染

采用什么技術(shù)有利于SEO？要解答這個(gè)問題需要理解服務(wù)端渲染和客戶端渲染。
什么是服務(wù)端渲染?
我們用傳統(tǒng)的servlet開發(fā)來舉例：瀏覽器請(qǐng)求servlet，servlet在服務(wù)端生成html響應(yīng)給瀏覽器，瀏覽器展示html的內(nèi)容，這個(gè)過程就是服務(wù)端渲染，如下圖

image.png

image.png

客戶端渲染的特點(diǎn)：
1）在服務(wù)端只是給客戶端響應(yīng)的了數(shù)據(jù)，而不是html網(wǎng)頁
2）客戶端（瀏覽器）負(fù)責(zé)獲取服務(wù)端的數(shù)據(jù)生成Dom元素。

兩種方式各有什么優(yōu)缺點(diǎn)？
客戶端渲染：
1）缺點(diǎn)
不利于網(wǎng)站進(jìn)行SEO，因?yàn)榫W(wǎng)站大量使用javascript技術(shù)，不利于spider抓取網(wǎng)頁。
2）優(yōu)點(diǎn)
客戶端負(fù)責(zé)渲染，用戶體驗(yàn)性好，服務(wù)端只提供數(shù)據(jù)不用關(guān)心用戶界面的內(nèi)容，有利于提高服務(wù)端的開發(fā)效率。
3）適用場(chǎng)景
對(duì)SEO沒有要求的系統(tǒng)，比如后臺(tái)管理類的系統(tǒng)，如電商后臺(tái)管理，用戶管理等。

服務(wù)端渲染：
1） 優(yōu)點(diǎn)
有利于SEO，網(wǎng)站通過href的url將spider直接引到服務(wù)端，服務(wù)端提供優(yōu)質(zhì)的網(wǎng)頁內(nèi)容給spider。
2） 缺點(diǎn)
服務(wù)端完成一部分客戶端的工作，通常完成一個(gè)需求需要修改客戶端和服務(wù)端的代碼，開發(fā)效率低，不利于系統(tǒng)的穩(wěn)定性。
3）適用場(chǎng)景
對(duì)SEO有要求的系統(tǒng)，比如：門戶首頁、商品詳情頁面等。

2 Nuxt.js介紹

2.1 Nuxt.js

移動(dòng)互聯(lián)網(wǎng)的興起促進(jìn)了web前后端分離開發(fā)模式的發(fā)展，服務(wù)端只專注業(yè)務(wù)，前端只專注用戶體驗(yàn)，前端大量運(yùn)用的前端渲染技術(shù)，比如流行的vue.js、react框架都實(shí)現(xiàn)了功能強(qiáng)大的前端渲染。
但是，對(duì)于有SEO需求的網(wǎng)頁如果使用前端渲染技術(shù)去開發(fā)就不利于SEO了，有沒有一種即使用vue.js、react的前端技術(shù)也實(shí)現(xiàn)服務(wù)端渲染的技術(shù)呢？其實(shí)，對(duì)于服務(wù)端渲染的需求，vue.js、react這樣流行的前端框架提供了服務(wù)端渲染的解決方案。

image.png

從上圖可以看到：
react框架提供next.js實(shí)現(xiàn)服務(wù)端渲染。
vue.js框架提供Nuxt.js實(shí)現(xiàn)服務(wù)端渲染。

2.2 Nuxt.js工作原理

image.png

1、用戶打開瀏覽器，輸入網(wǎng)址請(qǐng)求到Node.js
2、部署在Node.js的應(yīng)用Nuxt.js接收瀏覽器請(qǐng)求，并請(qǐng)求服務(wù)端獲取數(shù)據(jù)
3、Nuxt.js獲取到數(shù)據(jù)后進(jìn)行服務(wù)端渲染
4、Nuxt.js將html網(wǎng)頁響應(yīng)給瀏覽器

Nuxt.js使用了哪些技術(shù)？
Nuxt.js使用Vue.js+webpack+Babel三大技術(shù)框架/組件，如下圖

image.png

Babel 是一個(gè)js的轉(zhuǎn)碼器，負(fù)責(zé)將ES6的代碼轉(zhuǎn)成瀏覽器識(shí)別的ES5代碼。
Webpack是一個(gè)前端工程打包工具。
Vue.js是一個(gè)優(yōu)秀的前端框架。

Nuxt.js的特性有哪些？

• 基于 Vue.js
• 自動(dòng)代碼分層
• 服務(wù)端渲染
• 強(qiáng)大的路由功能，支持異步數(shù)據(jù)
• 靜態(tài)文件服務(wù)
• ES6/ES7 語法支持
• 打包和壓縮 JS 和 CSS
• HTML頭部標(biāo)簽管理
• 本地開發(fā)支持熱加載
• 集成ESLint
• 支持各種樣式預(yù)處理器： SASS、LESS、 Stylus等等