前端架构之路(9) - 服务器端渲染(SSR)与 node 中间层

服务器端渲染(SSR)与 node 中间层

1. 什么时候需要“服务器端渲染或 node 中间层”

在前后端分离之后,后端语言的模板功能被弱化,整个页面的渲染基本上都由前端 js 动态渲染,但这样对于一些应用来说是有缺陷的。比如需要 SEO 的,需要打开页面不用等待就能看到页面的,这尤其对于电商类应用是必需的。

解决这个问题有两个思路:

  1. 服务器端渲染(SSR):就是服务器端和前端共用同一个应用,然后通过构建工具及配置,确定哪些组件需要在服务器端渲染,哪些组件需要在客户端渲染;
  2. node 中间层:保留服务器端模板渲染的功能,但是由 node 程序来代替以往的后端语言进行模板渲染(毕竟前端更懂前端),后端语言与 node 程序只做数据交互。

2. 服务器端渲染

服务器端渲染,由框架与构建工具配合,并依据一定的项目结构和编码方式,共同运行。

现有比较好解决方案:

对于 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 工具为例:

  1. 配置 lila.config.jswriteFiletrue: { 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许可证

推荐阅读更多精彩内容