服務器端渲染（SSR）與 node 中間層
1. 什么時候需要“服務器端渲染或 node 中間層”
在前后端分離之后，后端語言的模板功能被弱化，整個頁面的渲染基本上都由前端 js 動態渲染，但這樣對于一些應用來說是有缺陷的。比如需要 SEO 的，需要打開頁面不用等待就能看到頁面的，這尤其對于電商類應用是必需的。
解決這個問題有兩個思路：
- 服務器端渲染（SSR）：就是服務器端和前端共用同一個應用，然后通過構建工具及配置，確定哪些組件需要在服務器端渲染，哪些組件需要在客戶端渲染；
- node 中間層：保留服務器端模板渲染的功能，但是由 node 程序來代替以往的后端語言進行模板渲染（畢竟前端更懂前端），后端語言與 node 程序只做數據交互。
2. 服務器端渲染
服務器端渲染，由框架與構建工具配合，并依據一定的項目結構和編碼方式，共同運行。
現有比較好解決方案：
- next.js: 服務器端渲染 react 組件，用法和介紹建議查看 用Next.js快速上手React服務器渲染。
- nuxt.js: 服務器端渲染 vue 組件，用法和介紹建議查看 https://zh.nuxtjs.org/。
對于 react, gatsby 也是一個不錯的解決方案。
服務器端渲染，社區還在不停的探索中，期待未來的新體驗。
如果構建完之后需要自動把代碼上傳服務器，可以試試 md-sync.
3. node 中間層
首先推薦大家看看：
使用 node 中間層做開發，有一個挑戰就是如何讓前后端分離的兩個項目協同開發與調試。
一般 web 項目開發時都有熱更新（Hot Reloading）與熱替換（Hot Replacing）功能，像 lila 構建工具都有內置這個功能，如果要自己搭建，推薦 webpack-dev-middleware & webpack-hot-middleware。
而一般 node 項目開發時也有類似的功能，推薦使用 nodemon，它可以監聽 node 程序文件變動，然后自動刷新服務器。
如果能將兩者結合起來開發，不管改動 web 項目文件還是 node 項目文件，瀏覽器頁面都能夠自動刷新，這樣就可以在本地調試 node 中間層的模板輸出，克服前后端分離帶來的弊端，提高開發效率。
當然這個功能需要構建工具去特定的支持。以 lila 工具為例：
- 配置
lila.config.js中writeFile為true:{ writeFile: true }; - 運行
lila模塊開發lila dev test/index; - 運行 node 應用程序
nodemon app.js，并將 url 指定path/to/web/project/dev/test/index/index.html; - 在瀏覽器中打開
http://localhost:3000（具體的地址根據 node 應用程序而定）; - 更改
web/project/src/test/index/下的文件，刷新瀏覽器可以看到變化; - 更改 node 應用程序文件，刷新瀏覽器也可以看到變化;
4. 后續
上一篇：單頁面應用（SPA）、按需加載
更多博客，查看 https://github.com/senntyou/blogs
版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）
