前端架構之路（9） - 服務器端渲染（SSR）與 node 中間層

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

1. 何時須要「服務器端渲染或 node 中間層」

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

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

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

2. 服務器端渲染

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

現有比較好解決方案：

• next.js: 服務器端渲染 react 組件，用法和介紹建議查看 用Next.js快速上手React服務器渲染。
• nuxt.js: 服務器端渲染 vue 組件，用法和介紹建議查看 https://zh.nuxtjs.org/。

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

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

若是構建完以後須要自動把代碼上傳服務器，能夠試試 md-sync.

3. node 中間層

首先推薦你們看看：

• 從NodeJS搭建中間層再談先後端分離
• 淘寶先後端分離實踐

使用 node 中間層作開發，有一個挑戰就是如何讓先後端分離的兩個項目協同開發與調試。

通常 web 項目開發時都有熱更新（Hot Reloading）與熱替換（Hot Replacing）功能，像 lila 構建工具都有內置這個功能，若是要本身搭建，推薦 webpack-dev-middleware & webpack-hot-middleware。

而通常 node 項目開發時也有相似的功能，推薦使用 nodemon，它能夠監聽 node 程序文件變更，而後自動刷新服務器。

若是能將二者結合起來開發，無論改動 web 項目文件仍是 node 項目文件，瀏覽器頁面都可以自動刷新，這樣就能夠在本地調試 node 中間層的模板輸出，克服先後端分離帶來的弊端，提升開發效率。

固然這個功能須要構建工具去特定的支持。以 lila 工具爲例：

1. 配置 lila.config.js 中 writeFile 爲 true: { writeFile: true };
2. 運行 lila 模塊開發 lila dev test/index;
3. 運行 node 應用程序 nodemon app.js，並將 url 指定 path/to/web/project/dev/test/index/index.html;
4. 在瀏覽器中打開 http://localhost:3000（具體的地址根據 node 應用程序而定）;
5. 更改 web/project/src/test/index/ 下的文件，刷新瀏覽器能夠看到變化;
6. 更改 node 應用程序文件，刷新瀏覽器也能夠看到變化;

更詳細的使用步驟和示例能夠查看這裏

4. 後續

上一篇：單頁面應用（SPA）、按需加載

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）