前端架构之路（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许可证）