服務器端渲染（SSR）與 node 中間層

1. 什么時候需要“服務器端渲染或 node 中間層”

在前后端分離之后，后端語言的模板功能被弱化，整個頁面的渲染基本上都由前端 js 動態渲染，但這樣對于一些應用來說是有缺陷的。比如需要 SEO 的，需要打開頁面不用等待就能看到頁面的，這尤其對于電商類應用是必需的。

解決這個問題有兩個思路：

服務器端渲染（SSR）：就是服務器端和前端共用同一個應用，然后通過構建工具及配置，確定哪些組件需要在服務器端渲染，哪些組件需要在客戶端渲染；
node 中間層：保留服務器端模板渲染的功能，但是由 node 程序來代替以往的后端語言進行模板渲染（畢竟前端更懂前端），后端語言與 node 程序只做數據交互。

服務器端渲染，由框架與構建工具配合，并依據一定的項目結構和編碼方式，共同運行。

現有比較好解決方案：

對于 react, gatsby 也是一個不錯的解決方案。

服務器端渲染，社區還在不停的探索中，期待未來的新體驗。

如果構建完之后需要自動把代碼上傳服務器，可以試試 md-sync.

首先推薦大家看看：

使用 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 應用程序文件，刷新瀏覽器也可以看到變化;