细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)

2018-10-16 admin

前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)。

1. 后端模板渲染

前端与后端最初的渲染方式是后端模板渲染,就是由后端使用模板引擎渲染好 html 后,返回给前端,前端再用 js 去操作 dom 或者渲染其他动态的部分。

这个过程大致分成以下几个步骤:

图片描述

  1. 前端请求一个地址 url
  2. 后端接收到这个请求,然后根据请求信息,从数据库或者其他地方获取相应的数据
  3. 使用模板引擎(如 java > jspphp > smarty)将这些数据渲染成 html
  4. html 文本返回给前端

在这个过程中,前端的 html 代码需要嵌入到后端代码中(如 javaphp),并且在很多情况下,前端源代码和后端源代码是在一个工程里的。

所以,不难看出,这种方式的有这样的几个不足:

  1. 前后端杂揉在一起,不方便本地开发、本地模拟调试,也不方便自动化测试
  2. 前端被约束在后端开发的模式中,不能充分使用前端的构建生态,开发效率低下
  3. 项目难以管理和维护,也可能会有前后端职责不清的问题

尽管如此,但因为这种方式是最早出现的方式,并且这种渲染方式有一个好处,就是前端能够快速呈现服务器端渲染好的页面,而不用等客户端渲染,这能够提供很好的用户体验与 SEO 友好,所以当下很多比较早的网站或者需要快速响应的展示性网站仍然是使用这种方式。

2. 客户端渲染

随着前端工程化与前后端分离的发展,以及前端组件化技术的出现,如 reactvue 等,客户端渲染已经慢慢变成了主要的开发方式了。

与后端模板渲染刚好相反,客户端渲染的页面渲染都是在客户端进行,后端不负责任何的渲染,只管数据交互。

这个过程大致分成以下几个步骤:

图片描述

  1. 前端请求一个地址 url
  2. 后端接收到这个请求,然后把相应的 html 文件直接返回给前端
  3. 前端解析 js 后,然后通过 ajax 向后台获取相应的数据
  4. 然后由 js 将这些数据渲染成页面

这样一来,前端与后端将完全解耦,数据使用全 ajax 的方式进行交互,如此便可前后端分离了。

其实,不难看出,客户端渲染与前后端分离有很大的好处:

  1. 前端独立出来,可以充分使用前端生态的强大功能
  2. 更好的管理代码,更有效率的开发、调试、测试
  3. 前后端代码解耦之后,能更好的扩展、重构

所以,客户端渲染与前后端分离现在已经是主流的开发方式了。

但这种方式也有一些不足:

  1. 首屏加载缓慢,因为要等 js 加载完毕后,才能进行渲染
  2. SEO 不友好,因为 html 中几乎没有可用的信息

3. node 中间层

为了解决客户端渲染的不足,便出现了 node 中间层的理念。

传统的 B/S 架构中,是 浏览器 -> 后端服务器 -> 浏览器,上文所讲的都是这种架构。

而加入了 node 中间层之后,就变成 浏览器 -> node -> 后端服务器 -> node -> 浏览器

这个过程大致分成以下几个步骤:

图片描述

  1. 前端请求一个地址 url
  2. node 层接收到这个请求,然后根据请求信息,向后端服务器发起请求,获取数据
  3. 后端服务器接收到请求,然后根据请求信息,从数据库或者其他地方获取相应的数据,返回给 node 层
  4. node 层根据这些数据渲染好首屏 html
  5. node 层将 html 文本返回给前端

一个典型的 node 中间层应用就是后端提供数据、node 层渲染模板、前端动态渲染。

这个过程中,node 层由前端开发人员掌控,页面中哪些页面在服务器上就渲染好,哪些页面在客户端渲染,由前端开发人员决定。

这样做,达到了以下的目的:

  1. 保留后端模板渲染、首屏快速响应、SEO 友好
  2. 保留前端后分离、客户端渲染的功能(首屏服务器端渲染、其他客户端渲染)

但这种方式也有一些不足:

  1. 增加了一个中间层,应用性能有所降低
  2. 增加了架构的复杂度、不稳定性,降低应用的安全性
  3. 对开发人员要求高了很多

4. 服务器端渲染(ssr)

大部分情况下,服务器端渲染(ssr)与 node 中间层是同一个概念。

服务器端渲染(ssr)一般特指,在上文讲到的 node 中间层基础上,加上前端组件化技术在服务器上的渲染,特别是 reactvue

reactvueangular 等框架的出现,让前端组件化技术深入人心,但在一些需要首屏快速加载与 SEO 友好的页面就陷入了两难的境地了。

因为前端组件化技术天生就是给客户端渲染用的,而在服务器端需要被渲染成 html 文本,这确实不是一件很容易的事,所以服务器端渲染(ssr)就是为了解决这个问题。

好在社区一直在不断的探索中,让前端组件化能够在服务器端渲染,比如 next.jsnuxt.jsrazzlereact-serverbeidou 等。

一般这些框架都会有一些目录结构、书写方式、组件集成、项目构建的要求,自定义属性可能不是很强。

next.js 为例,整个应用中是没有 html 文件的,所有的响应 html 都是 node 动态渲染的,包括里面的元信息、css, js 路径等。渲染过程中,next.js 会根据路由,将首页所有的组件渲染成 html,余下的页面保留原生组件的格式,在客户端渲染。

5. 另外

  1. 不需要首屏快速加载、SEO 友好的,用全客户端渲染
  2. 需要首屏快速加载、SEO 友好的,如果用了如 reactvue 等组件化技术,将不得不用 node 中间层与服务器端渲染
  3. 如果技术团队不支持,不建议在需要首屏快速加载、SEO 友好的地方使用如 reactvue 等组件化技术
  4. 前后端分离之后也可以做后端模板渲染,这样前端的调试可以搭配 handlebarsejs 等模板引擎进行本地调试,而后端的调试则需要到测试机了

后续

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

作者:深予之 (@senntyou)

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证

原文链接:https://segmentfault.com/a/1190000016704384

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42868.html

文章标题:细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)

相关文章
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
Node.js将向移动端扩展
如果你还没有听过Node.js,那么现在就可以了解一下! 目前,来自200多个国家的数以万计的组织在使用Node.js,在Node.js的网站上,每月都有超过200万次下载。但版本发布缓慢使开发人员日益不满,网上出现了创建Node.js分支...
2015-11-12
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
windows 下安装nodejs 环境变量设置
要设置两个东西,一个是PATH上增加node.exe的目录C:\Program Files\nodejs,一个是增加环境变量NODE_PATH,值为C:\Program Files\nodejs\node_modules 一、下载 去nod...
2017-03-18
Node.js深受欢迎的六大原因
Node.js鏄�涓€绉嶅悗璧风殑浼樼�€鏈嶅姟鍣ㄧ紪绋嬭��瑷€锛屽畠鐢ㄦ潵鏋勫缓鍜岃繍琛學eb搴旂敤锛岃繖鍜孉SP.NET锛孯uby聽on聽Rails鎴朣pring妗嗘灦鍋氱殑宸ヤ綔鏄�绫讳技鐨勩€傚畠浣跨敤JavaScript浣滀负涓...
2015-11-11
Node.js实现Excel转JSON
一直在做一个关于网上选课的系统,选用了时下比较流行的node.js。今天在想怎么把学生或者老师的信息导入进去,涉及数量比较多一点,我手边又正好有一部分excel的表格。就想把excel转成json然后倒入到mongodb中去。 搜了下网上的...
2017-03-23
Windows系统下使用Sublime搭建nodejs环境
1.下载nodejs,并安装ok后,配置好环境变量。 2.下载sublime text3 3.在package install 包中新增node插件(或者直接去SublimeText-Nodejs插件(https://github.com/...
2017-03-22
nodejs搭建本地服务器并访问文件的方法
安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容。新建server.js作为node开启的入口: $ cd f:&...
2017-03-13
PHP 和 Node.js 的角摔
在最近 SitePoint 的 PHP vs Node.js Smackdown 一文中,Craig Buckler 对两种语言就如何应对一系列的10个挑战进行了比较来决定哪一个总体上更佳。 Craig 在书中讲到,这些比较总是有些矛盾。作...
2015-12-25
回到顶部