什么是SSR其實(shí)就是Server Side Render的簡(jiǎn)稱(chēng)，簡(jiǎn)單點(diǎn)說(shuō)就是在服務(wù)器端填充數(shù)據(jù)，渲染頁(yè)面然后吐到客戶(hù)端來(lái)展示，為啥最近又開(kāi)始提及服務(wù)器端渲染了呢？都是Vue啊，react 等等這些前端框架鬧的，在這些框架沒(méi)有出現(xiàn)之前，很多頁(yè)面也都是服務(wù)器端渲染，然后ajax的出現(xiàn)讓服務(wù)器的的工作一部分交給了前端，前端發(fā)請(qǐng)求，服務(wù)器端吐數(shù)據(jù)，增強(qiáng)了頁(yè)面交互性，服務(wù)器端因此也不完全渲染頁(yè)面了，也可以說(shuō)只是渲染部分頁(yè)面。
Vue更是厲害直接使用虛擬DOM，那么什么是虛擬DOM呢？
這么說(shuō)吧，我們直接在html頁(yè)面里寫(xiě)的都是真實(shí)的DOM元素，都是網(wǎng)絡(luò)爬蟲(chóng)可以抓取到的。
如果你用js寫(xiě)的一段代碼生成的DOM元素然后插進(jìn)頁(yè)面里去的，那么爬蟲(chóng)是抓取不到的，如果抓取不到那么seo怎么做呢？
所以說(shuō)虛擬DOM的SEO是很渣很渣的。當(dāng)如如果你不在乎seo那自然是無(wú)所謂的了。再說(shuō)虛擬DOM也并非一無(wú)是處，它避免大量無(wú)謂的計(jì)算量，讓頁(yè)面顯示速度更快。
如果在乎SEO那就的想想怎么才能對(duì)爬蟲(chóng)更友好，讓廣大網(wǎng)友更容易更快的找到你的網(wǎng)站，而不是其他人的。這對(duì)網(wǎng)站推廣非常重要。
當(dāng)然我們還是希望能夠使用Vue的，那么Nuxt.js是你實(shí)現(xiàn)服務(wù)器端渲染SSR的首選框架了。
Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。
通過(guò)對(duì)客戶(hù)端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。
不做太多這個(gè)框架的介紹了，因?yàn)楣倬W(wǎng)上的很詳細(xì)了，總之是一個(gè)比較牛逼的團(tuán)隊(duì)他們Wie什么開(kāi)發(fā)這個(gè)框架，做了哪些優(yōu)化和配置，然后巴拉巴拉一堆吧。
本次我們重點(diǎn)聊下安裝，帶領(lǐng)大家做一次最初的體驗(yàn)，當(dāng)然如果你還沒(méi)有使用過(guò)Vue，那么可以先不看這篇文章了，等體驗(yàn)過(guò)了Vue的使用再過(guò)來(lái)讀吧。
首先，你的開(kāi)發(fā)系統(tǒng)中需要有Node環(huán)境，可以使用yarn或者 npm進(jìn)行安裝 ，最好再整一個(gè) n (Node.js版本管理工具)
然后執(zhí)行以下步驟
1.用npm來(lái)安裝vue-cli這個(gè)框架，如果你已經(jīng)安裝過(guò)了，可以省略這步。
npm install vue-cli -g
多數(shù)情況下比較慢，建議使用cnpm進(jìn)行安裝。安裝成功后可以使用
vue -V
查看驗(yàn)證安裝是否完成
然后使用官網(wǎng)提供的腳手架就可以完成項(xiàng)目搭建了
確保安裝了npx（npx在NPM版本5.2.0默認(rèn)安裝了）：
$ npx create-nuxt-App <項(xiàng)目名>
或者用yarn ：
$ yarn create nuxt-app <項(xiàng)目名>
安裝的過(guò)程中一般都讓你選擇用什么做為服務(wù)端語(yǔ)言 一般都會(huì)選koa,當(dāng)然你也可以選其他的。然后選哪個(gè)UI 模板，一般的elementUI居多，還會(huì)問(wèn)你要不進(jìn)行服務(wù)端渲染，這么不是廢話(huà)嗎？完成之后執(zhí)行
npm run dev 就會(huì)運(yùn)行起來(lái)了。你會(huì)看到大概下面這樣的一個(gè)網(wǎng)頁(yè)，然后可以查看一下源代碼，就會(huì)發(fā)現(xiàn)和之前的Vue不一樣了吧，你的htm了都出現(xiàn)了
抓緊玩兒起來(lái)。最后祝大家在像素世界里玩兒的開(kāi)心。
