團隊在最近的一次開發中前端技術棧從html + css + jquery轉向vue全家桶。後端從php + Blade + jquery轉向vue全家桶。
在轉向前後端分離的開發模式中遇到了一些問題。
- 首屏載入緩慢
- seo問題
- 前後端分離中的非同步請求數量過多等問題
為了解決上面的尤其是第二個問題。團隊決定使用服務端渲染。
服務端渲染
服務端渲染可以很好的解決打包檔案過大導致的首次載入白屏問題，並且頁面開啟速度相比於js渲染介面快很多。
就像過去用php的模板引擎渲染html介面也是一種服務端渲染方式，但並不適用於大JavaScript時代了。
我最早看到服務端渲染是在淘寶部落格的前後端分離的思考與實踐中，他們提出了一箇中途島的概念。
其實回頭想想，在我們把渲染的工作從 服務端抽出來到 瀏覽器端（JS）的時候，我們的目的只是明確的前後端職責劃分，並不是非瀏覽器渲染不可。
只是因為在傳統的開發模式中，出了伺服器就到了瀏覽器，所以前端的工作內容只能被限制在瀏覽器端。
也因此很多人認定了 後端 = 服務端 前端 = 瀏覽器端
——前後端分離的思考與實踐
原文連結 前後端分離的思考與實踐（二）
前後端分離是架構上的分離，並不是人員上的分離，php程式設計師寫寫現代js對自身的成長也是有很大幫助的。
其實我想說的是php並不是不可替代的?，node.js什麼嗒也是可以很好的完成web開發的
由於使用了vue全家桶，且對node.js也不是很熟悉，所以選擇了nuxt.js服務端渲染框架 （主要還是用起來簡單，學起來快）
nuxt
nuxt中文文件 https://zh.nuxtjs.org/guide
在使用nuxt的過程中，我們對一個介面的請求方式有兩種。
- 從瀏覽器位址列鍵入
- 通過類似 router-link的a標籤點選跳轉
當我們從瀏覽器的位址列中鍵入一條請求時，請求被交給了nuxt伺服器（或者nginx→nuxt）。
nuxt伺服器解析vue元件（中的asyncData方法），並將資料繫結到html。然後再返回給瀏覽器。
當我們通過點選router-link跳轉時整個應用依舊是無重新整理的單頁應用。且會在window.history中鍵入記錄。
因此對於任意一個vue元件其被訪問的情況分為兩種，瀏覽器端渲染和nuxt伺服器端渲染。
瞭解nuxt最快的方式就是了解nuxt的生命週期，瞭解nuxt生命週期最快的方式自然是conlose.log()了。
並不具體的細節請參考手冊。
後記
nuxt專案還比較年輕，所以存在一些莫名奇妙的bug（更多的bug主要是對js不熟悉所致）。
但是vue官方推薦，且有著強大的社群支撐，所以還是有著不錯的維護效率。
部落格地址 nuxt——服務端渲染可選方案