什么是SSR其實就是Server Side Render的簡稱,簡單點說就是在服務器端填充數據,渲染頁面然后吐到客戶端來展示,為啥最近又開始提及服務器端渲染了呢?都是Vue啊,react 等等這些前端框架鬧的,在這些框架沒有出現之前,很多頁面也都是服務器端渲染,然后ajax的出現讓服務器的的工作一部分交給了前端,前端發請求,服務器端吐數據,增強了頁面交互性,服務器端因此也不完全渲染頁面了,也可以說只是渲染部分頁面。

Vue更是厲害直接使用虛擬DOM,那么什么是虛擬DOM呢?
這么說吧,我們直接在html頁面里寫的都是真實的DOM元素,都是網絡爬蟲可以抓取到的。

如果你用js寫的一段代碼生成的DOM元素然后插進頁面里去的,那么爬蟲是抓取不到的,如果抓取不到那么seo怎么做呢?
所以說虛擬DOM的SEO是很渣很渣的。當如如果你不在乎seo那自然是無所謂的了。再說虛擬DOM也并非一無是處,它避免大量無謂的計算量,讓頁面顯示速度更快。

如果在乎SEO那就的想想怎么才能對爬蟲更友好,讓廣大網友更容易更快的找到你的網站,而不是其他人的。這對網站推廣非常重要。
當然我們還是希望能夠使用Vue的,那么Nuxt.js是你實現服務器端渲染SSR的首選框架了。
Nuxt.js 是一個基于 Vue.js 的通用應用框架。
通過對客戶端/服務端基礎架構的抽象組織,Nuxt.js 主要關注的是應用的 UI渲染。

不做太多這個框架的介紹了,因為官網上的很詳細了,總之是一個比較牛逼的團隊他們Wie什么開發這個框架,做了哪些優化和配置,然后巴拉巴拉一堆吧。
本次我們重點聊下安裝,帶領大家做一次最初的體驗,當然如果你還沒有使用過Vue,那么可以先不看這篇文章了,等體驗過了Vue的使用再過來讀吧。
首先,你的開發系統中需要有Node環境,可以使用yarn或者 npm進行安裝 ,最好再整一個 n (Node.js版本管理工具)
然后執行以下步驟
1.用npm來安裝vue-cli這個框架,如果你已經安裝過了,可以省略這步。
npm install vue-cli -g
多數情況下比較慢,建議使用cnpm進行安裝。安裝成功后可以使用
vue -V
查看驗證安裝是否完成
然后使用官網提供的腳手架就可以完成項目搭建了
確保安裝了npx(npx在NPM版本5.2.0默認安裝了):
$ npx create-nuxt-App <項目名>
或者用yarn :
$ yarn create nuxt-app <項目名>
安裝的過程中一般都讓你選擇用什么做為服務端語言 一般都會選koa,當然你也可以選其他的。然后選哪個UI 模板,一般的elementUI居多,還會問你要不進行服務端渲染,這么不是廢話嗎?完成之后執行
npm run dev 就會運行起來了。你會看到大概下面這樣的一個網頁,然后可以查看一下源代碼,就會發現和之前的Vue不一樣了吧,你的htm了都出現了

抓緊玩兒起來。最后祝大家在像素世界里玩兒的開心。