爲何要用Nuxt.js？

如今咱們的項目大多數都是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的方法：

一、使用prerender-spa-plugin插件

若是你使用 webpack，你可使用prerender-spa-plugin輕鬆地添加預渲染。它已經被 Vue 應用程序普遍測試 - 事實上，做者是 Vue 核心團隊的成員。

這種實現方式並不叫 SSR，而是預渲染。不過效果上是同樣的，甚至某種程度上來講可能要比 SSR 更好。相比官方提供的 SSR 繁瑣配置，prerender 配置更簡單快捷，如無特殊要求只需在 webpack 中加一個 plugin 的配置。

這種方法簡單、易上手、無需配置就能知足基本的 SEO 要求，可是不適合頻繁變更的頁面，由於預渲染只是相似於快照的概念。

具體配置可自行查看Prerender SPA Plugin

二、官方提供的輪子在node端作SSR

相對於 prerender 插件來講，SSR 上手真的超級複雜，有興趣能夠自行查看Vue SSR 指南

這種方法能夠作到真實數據實時渲染，徹底可供SEO小蜘蛛盡情的爬來爬去，徹底先後端同構，路由配置共享，再也不影響服務器404請求，可是配置比較麻煩、處理流程比較複雜 (比對預渲染插件，複雜太多)約束較多，對服務器會形成較大的壓力，服務器成本過高了。。

三、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 文件夾生成的。

 

 

參考：實現基於Nuxt.js的SSR應用、Vue SSR 指南以及讓vue-cli初始化後的項目集成支持SSR

做者：吸貓羣衆
連接：https://www.jianshu.com/p/6516f2a3ce36來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。