現(xiàn)在我們的項(xiàng)目大多數(shù)都是spa（單頁(yè)面應(yīng)用），感覺(jué)單頁(yè)面應(yīng)用比之前的模板渲染要好很多，首先單頁(yè)面應(yīng)用是前后端分離，架構(gòu)清晰，前端負(fù)責(zé)交互邏輯，后端負(fù)責(zé)數(shù)據(jù)，前后端單獨(dú)開(kāi)發(fā)，獨(dú)立測(cè)試。
但是，SPA不利于SEO（搜索引擎優(yōu)化）。
那么為什么要做SEO？做SEO有什么好處？簡(jiǎn)單來(lái)說(shuō)SEO是一種利用技術(shù)手段提升網(wǎng)站在搜索引擎之中的排名的方式，讓搜索引擎更為信任網(wǎng)站，通過(guò)提升排名獲得更多網(wǎng)站流量。
目前大部分的Vue項(xiàng)目本質(zhì)是 SPA 應(yīng)用，React、Angular也都是SPA應(yīng)用。SPA應(yīng)用廣泛用于對(duì)SEO要求不高的場(chǎng)景中。
在我們開(kāi)發(fā)的過(guò)程中，我們有 SEO 的需求，我們需要搜索引擎更多地抓取到我們的項(xiàng)目?jī)?nèi)容，此時(shí)我們需要SSR。SSR保證用戶(hù)盡快看到基本的內(nèi)容，也使得用戶(hù)體驗(yàn)性更好。
SSR： 服務(wù)端渲染（Server Side Render），即：網(wǎng)頁(yè)是通過(guò)服務(wù)端渲染生成后輸出給客戶(hù)端。比如JSP、PHP、JavaWeb等都是SSR架構(gòu)，也就是服務(wù)端取出數(shù)據(jù)和模板組合生成 html 輸出給前端，前端發(fā)生請(qǐng)求時(shí)，重新向服務(wù)端請(qǐng)求 html 資源，路由也由服務(wù)端來(lái)控制。
我們需要這樣的代碼：
實(shí)現(xiàn)SSR的方法：
1、使用prerender-spa-plugin插件
如果你使用 webpack，你可以使用prerender-spa-plugin輕松地添加預(yù)渲染。它已經(jīng)被 Vue 應(yīng)用程序廣泛測(cè)試 - 事實(shí)上，作者是 Vue 核心團(tuán)隊(duì)的成員。
這種實(shí)現(xiàn)方式并不叫 SSR，而是預(yù)渲染。不過(guò)效果上是一樣的，甚至某種程度上來(lái)說(shuō)可能要比 SSR 更好。相比官方提供的 SSR 繁瑣配置，prerender 配置更簡(jiǎn)單快捷，如無(wú)特殊要求只需在 webpack 中加一個(gè) plugin 的配置。
這種方法簡(jiǎn)單、易上手、無(wú)需配置就能滿(mǎn)足基本的 SEO 要求，但是不適合頻繁變動(dòng)的頁(yè)面，因?yàn)轭A(yù)渲染只是類(lèi)似于快照的概念。
具體配置可自行查看Prerender SPA Plugin
2、官方提供的輪子在node端做SSR
相對(duì)于 prerender?插件來(lái)說(shuō)，SSR 上手真的超級(jí)復(fù)雜，有興趣可以自行查看Vue SSR 指南
這種方法可以做到真實(shí)數(shù)據(jù)實(shí)時(shí)渲染，完全可供SEO小蜘蛛盡情的爬來(lái)爬去，完全前后端同構(gòu)，路由配置共享，不再影響服務(wù)器404請(qǐng)求，但是配置比較麻煩、處理流程比較復(fù)雜 (比對(duì)預(yù)渲染插件，復(fù)雜太多)約束較多，對(duì)服務(wù)器會(huì)造成較大的壓力，服務(wù)器成本太高了。。
3、Nuxt.js
Nuxt.js是使用 Webpack 和 Node.js 進(jìn)行封裝的基于Vue的SSR框架，不需要自己搭建一套 SSR 程序，而是通過(guò)其約定好的文件結(jié)構(gòu)和API就可以實(shí)現(xiàn)一個(gè)首屏渲染的 Web 應(yīng)用。
綜上3種方法，我選擇了第三種——Nuxt.js
Nuxt.js 是一個(gè) Node 程序，必須使用 Node 環(huán)境。我們對(duì) Nuxt.js 應(yīng)用的訪(fǎng)問(wèn)，實(shí)際上是在訪(fǎng)問(wèn)這個(gè) Node.js 程序的路由，程序輸出首屏渲染內(nèi)容 + 用以重新渲染的 SPA 的腳本代碼，而路由是由 Nuxt.js 約定好的 pages 文件夾生成的。
參考：實(shí)現(xiàn)基于Nuxt.js的SSR應(yīng)用、Vue SSR 指南以及讓vue-cli初始化后的項(xiàng)目集成支持SSR
