前端路由和後端路由，前端渲染和後端渲染

1.vue-router和koa-router的區別

vue-router是前端路由，koa-router是後端路由。

前端路由

定義：在單頁面應用，大部分頁面結構不變，只改變部分內容的使用

優點：使用者體驗好，不需要每次都從伺服器全部獲取，快速展現給使用者

缺點：
使用瀏覽器的前進，後退鍵的時候會重新傳送請求，沒有合理地利用快取
單頁面無法記住之前滾動的位置，無法在前進，後退的時候記住滾動的位置

後端路由

定義：透過使用者請求的url導航到具體的html頁面；每跳轉到不同的URL，都是重新訪問服務端，然後服務端返回頁面，頁面也可以是服務端獲取資料，然後和模板組合，返回HTML，也可以是直接返回模板HTML，然後由前端再去請求資料，使用前端模板和資料進行組合，生成想要的HTML

對比

1.從效能和使用者體驗的層面來比較的話，後端路由每次訪問一個新頁面的時候都要向伺服器傳送請求，然後伺服器再響應請求，這個過程肯定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網路延遲，對於使用者體驗來說會有相當大的提升。  　　　　
2.在某些場合中，用ajax請求，可以讓頁面無重新整理，頁面變了但Url沒有變化，使用者就不能複製到想要的地址，用前端路由做單頁面網頁就很好的解決了這個問題。但是前端路由使用瀏覽器的前進，後退鍵的時候會重新傳送請求，沒有合理地利用快取。

vue-router前端路由原理

前端路由主要模式：hash模式和history模式

而在vue-router中，它提供mode引數來決定採用哪一種方式，選擇流程如下:
預設Hash-->如果瀏覽器支援History新特性改用History-->如果不在瀏覽器環境則使用abstract

選好mode後建立history物件(HashHistory或HTML5History或AbstractHistory)

可見最被青睞的是History模式，理由是: "#"太醜了。。

前端渲染：

定義：指的是後端返回JSON資料，前端利用預先寫的html模板，迴圈讀取JSON資料，拼接字串（es6的模板字串特性大大減少了拼接字串的的成本），並插入頁面。

好處：網路傳輸資料量小。不佔用服務端運算資源（解析模板），模板在前端（很有可能僅部分在前端），改結構變互動都前端自己來了，改完自己調就行。

壞處：前端耗時較多，對前端工作人員水平要求相對較高。前端程式碼較多，因為部分以前在後臺處理的互動邏輯交給了前端處理。佔用少部分客戶端運算資源用於解析模板。

後端渲染：

定義：前端請求，後端用後臺模板引擎直接生成html，前端接受到資料之後，直接插入頁面。

好處：前端耗時少，即減少了首屏時間，模板統一在後端。前端（相對）省事，不佔用客戶端運算資源（解析模板）

壞處：佔用伺服器資源。

作者：阿r阿r
連結：