當(dāng)前，SPA越來越無法滿足業(yè)務(wù)對頁面響應(yīng)速度的要求。隨著工程不斷變大，打包文件不斷增長，頁面的整體刷新加載速度慢慢成為瓶頸。

越來越多的應(yīng)用開始使用SSR來提高響應(yīng)速度。本文下面會對Vue SSR框架NUXT的處理流程，進(jìn)行描述和說明。

一，SSR與SPA的區(qū)別

在談NUXT前，我們得先了解一下什么是SSR。

SSR是英文server side render的縮寫，即服務(wù)端描畫。

之前在SPA單頁的時(shí)候，mouted元素部分，都是先去服務(wù)端拉取js腳本，然后客戶端解析成html。而在SSR下，mouted部分是服務(wù)端描畫好后，直接發(fā)送到客戶端，客戶端不用進(jìn)行html的重新組合，只需要激活即可。

紅色字體部分可以看到，只是響應(yīng)了主體，而真正的內(nèi)容部分需要去下載js，然后客戶端繪制出來再展示，哪這樣會有什么問題呢？對！白屏?xí)r間過長。雖然現(xiàn)在有骨架技術(shù)，也就是在響應(yīng)的html主體中，填充靜態(tài)內(nèi)容，但也是治標(biāo)不治本。

我們再看一下SSR的方式：

從圖上可以看到，服務(wù)端返回的是完整的解析內(nèi)容可以直接呈現(xiàn)在用戶面前。但這都是靜態(tài)的，要?jiǎng)討B(tài)化，就需要有一步激活的操作。

這就是SPA與SSR兩者的區(qū)別。哪Nuxt.js是什么呢？

二，Nuxt.js

Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架。

通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的UI渲染。

它既支持預(yù)渲染也支持SSR。SPA不是本文重點(diǎn)，今天我們重點(diǎn)說一下Nuxt的SSR部分。

相關(guān)部分的命令分2個(gè)

npm run dev（開發(fā)環(huán)境）

npm run build + npm run start（生產(chǎn)環(huán)境）

我們先看一張流程圖：

從圖上我們可以看到，開發(fā)和生產(chǎn)環(huán)境比，多了一步文件修改的監(jiān)聽。這也是為什么我們在開發(fā)過程中，修改代碼后，頁面可以立即產(chǎn)生變化。當(dāng)然監(jiān)聽到文件變化后，還會有一系列的操作。

三，編譯與啟動(dòng)

先看編譯的過程，如下圖

首先先加載nuxt.config.js，

然后初始化nuxt，builder，開始執(zhí)行構(gòu)建。

準(zhǔn)備模板使用的參數(shù)，然后根據(jù)模板生成真正的webpack編譯的js

分別執(zhí)行客戶端編譯和服務(wù)端編譯，生成最終的js腳本

編譯成功后，就需要啟動(dòng)服務(wù)，監(jiān)聽端口，這個(gè)是在npm run start中實(shí)現(xiàn)的。如下圖

啟動(dòng)后，加載配置文件

初始化Nuxt

對端口進(jìn)行監(jiān)聽。

如果有請求進(jìn)來，第一次會加載攔截器，然后攔截器會對請求進(jìn)行區(qū)分?jǐn)r截。

比如：如果是訪問的靜態(tài)文件，那么會有staticServer來處理。

如果是路由匹配的請求，那么nuxtMiddleware會進(jìn)行接受，然后通過VUE的SSR插件，去繪制響應(yīng)的html

四,SSR的使用場景以及缺點(diǎn)

SSR的優(yōu)點(diǎn)無非兩個(gè)，一個(gè)是對SEO友好，二就是更快的內(nèi)容到達(dá)時(shí)間。

所以在使用SSR的第一個(gè)場景，必然是對響應(yīng)速度有較高的要求

但同時(shí)也會有更高的瓶頸點(diǎn)和風(fēng)險(xiǎn)。主要有下面幾個(gè)：

更長的鏈路，之前是瀏覽器+nginx+后臺服務(wù)，而現(xiàn)在就變成瀏覽器+nginx+nodejs+后臺服務(wù)。

nodejs中的阻塞型請求，容易成為性能的瓶頸。

一套api，要考慮前后端的兼容性

對業(yè)務(wù)開發(fā)人員來說，曲線變長，需要能明確代碼在前后端的執(zhí)行位置

結(jié)語

????????本文簡單介紹了SSR以及NUXT的處理流程，希望對剛開始接觸SSR的前端，能有所幫助。里面都是個(gè)人見解，如有不準(zhǔn)確，歡迎批評指正。