前端架构之路（9） - 服务器端渲染（SSR）与 node 中间层 - 前端小站

服务器端渲染（SSR）与 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 应用程序文件，刷新浏览器也可以看到变化;