現在我們的項目大多數都是spa（單頁面應用），感覺單頁面應用比之前的模板渲染要好很多，首先單頁面應用是前后端分離，架構清晰，前端負責交互邏輯，后端負責數據，前后端單獨開發，獨立測試。
但是，SPA不利於SEO（搜索引擎優化）。
那么為什么要做SEO？做SEO有什么好處？簡單來說SEO是一種利用技術手段提升網站在搜索引擎之中的排名的方式，讓搜索引擎更為信任網站，通過提升排名獲得更多網站流量。
目前大部分的Vue項目本質是 SPA 應用，React、Angular也都是SPA應用。SPA應用廣泛用於對SEO要求不高的場景中。
在我們開發的過程中，我們有 SEO 的需求，我們需要搜索引擎更多地抓取到我們的項目內容，此時我們需要SSR。SSR保證用戶盡快看到基本的內容，也使得用戶體驗性更好。
SSR： 服務端渲染（Server Side Render），即：網頁是通過服務端渲染生成后輸出給客戶端。比如JSP、PHP、JavaWeb等都是SSR架構，也就是服務端取出數據和模板組合生成 html 輸出給前端，前端發生請求時，重新向服務端請求 html 資源，路由也由服務端來控制。
我們需要這樣的代碼：
實現SSR的方法：
1、使用prerender-spa-plugin插件
如果你使用 webpack，你可以使用prerender-spa-plugin輕松地添加預渲染。它已經被 Vue 應用程序廣泛測試 - 事實上，作者是 Vue 核心團隊的成員。
這種實現方式並不叫 SSR，而是預渲染。不過效果上是一樣的，甚至某種程度上來說可能要比 SSR 更好。相比官方提供的 SSR 繁瑣配置，prerender 配置更簡單快捷，如無特殊要求只需在 webpack 中加一個 plugin 的配置。
這種方法簡單、易上手、無需配置就能滿足基本的 SEO 要求，但是不適合頻繁變動的頁面，因為預渲染只是類似於快照的概念。
具體配置可自行查看Prerender SPA Plugin
2、官方提供的輪子在node端做SSR
相對於 prerender 插件來說，SSR 上手真的超級復雜，有興趣可以自行查看Vue SSR 指南
這種方法可以做到真實數據實時渲染，完全可供SEO小蜘蛛盡情的爬來爬去，完全前后端同構，路由配置共享，不再影響服務器404請求，但是配置比較麻煩、處理流程比較復雜 (比對預渲染插件，復雜太多)約束較多，對服務器會造成較大的壓力，服務器成本太高了。。
3、Nuxt.js
Nuxt.js是使用 Webpack 和 Node.js 進行封裝的基於Vue的SSR框架，不需要自己搭建一套 SSR 程序，而是通過其約定好的文件結構和API就可以實現一個首屏渲染的 Web 應用。
綜上3種方法，我選擇了第三種——Nuxt.js
Nuxt.js 是一個 Node 程序，必須使用 Node 環境。我們對 Nuxt.js 應用的訪問，實際上是在訪問這個 Node.js 程序的路由，程序輸出首屏渲染內容 + 用以重新渲染的 SPA 的腳本代碼，而路由是由 Nuxt.js 約定好的 pages 文件夾生成的。
作者：吸貓群眾
鏈接：https://www.jianshu.com/p/6516f2a3ce36
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。