转载自https://segmentfault.com/a/1190000016704384
作者:深予之 (@senntyou)
文章很详细的介绍了各种渲染方式的利弊,简洁明了,归纳清晰,很透彻。
前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)。
前端与后端最初的渲染方式是后端模板渲染,就是由后端使用模板引擎渲染好 html
后,返回给前端,前端再用 js
去操作 dom
或者渲染其他动态的部分。
这个过程大致分成以下几个步骤:
url
java > jsp
、php > smarty
)将这些数据渲染成 html
html
文本返回给前端在这个过程中,前端的 html
代码需要嵌入到后端代码中(如 java
、php
),并且在很多情况下,前端源代码和后端源代码是在一个工程里的。
所以,不难看出,这种方式的有这样的几个不足:
尽管如此,但因为这种方式是最早出现的方式,并且这种渲染方式有一个好处,就是前端能够快速呈现服务器端渲染好的页面,而不用等客户端渲染,这能够提供很好的用户体验与 SEO 友好,所以当下很多比较早的网站或者需要快速响应的展示性网站仍然是使用这种方式。
随着前端工程化与前后端分离的发展,以及前端组件化技术的出现,如 react、vue 等,客户端渲染已经慢慢变成了主要的开发方式了。
与后端模板渲染刚好相反,客户端渲染的页面渲染都是在客户端进行,后端不负责任何的渲染,只管数据交互。
这个过程大致分成以下几个步骤:
url
html
文件直接返回给前端js
后,然后通过 ajax
向后台获取相应的数据js
将这些数据渲染成页面这样一来,前端与后端将完全解耦,数据使用全 ajax
的方式进行交互,如此便可前后端分离了。
其实,不难看出,客户端渲染与前后端分离有很大的好处:
所以,客户端渲染与前后端分离现在已经是主流的开发方式了。
但这种方式也有一些不足:
js
加载完毕后,才能进行渲染html
中几乎没有可用的信息为了解决客户端渲染的不足,便出现了 node 中间层的理念。
传统的 B/S 架构中,是 浏览器 -> 后端服务器 -> 浏览器
,上文所讲的都是这种架构。
而加入了 node 中间层之后,就变成 浏览器 -> node -> 后端服务器 -> node -> 浏览器
。
这个过程大致分成以下几个步骤:
url
html
html
文本返回给前端一个典型的 node 中间层应用就是后端提供数据、node 层渲染模板、前端动态渲染。
这个过程中,node 层由前端开发人员掌控,页面中哪些页面在服务器上就渲染好,哪些页面在客户端渲染,由前端开发人员决定。
这样做,达到了以下的目的:
但这种方式也有一些不足:
大部分情况下,服务器端渲染(ssr)与 node 中间层是同一个概念。
服务器端渲染(ssr)一般特指,在上文讲到的 node 中间层基础上,加上前端组件化技术在服务器上的渲染,特别是 react和 vue。
react、vue、angular 等框架的出现,让前端组件化技术深入人心,但在一些需要首屏快速加载与 SEO 友好的页面就陷入了两难的境地了。
因为前端组件化技术天生就是给客户端渲染用的,而在服务器端需要被渲染成 html
文本,这确实不是一件很容易的事,所以服务器端渲染(ssr)就是为了解决这个问题。
好在社区一直在不断的探索中,让前端组件化能够在服务器端渲染,比如 next.js、nuxt.js、razzle、react-server、beidou等。
一般这些框架都会有一些目录结构、书写方式、组件集成、项目构建的要求,自定义属性可能不是很强。
以 next.js 为例,整个应用中是没有 html
文件的,所有的响应 html
都是 node 动态渲染的,包括里面的元信息、css, js
路径等。渲染过程中,next.js
会根据路由,将首页所有的组件渲染成 html
,余下的页面保留原生组件的格式,在客户端渲染。
react
、vue
等组件化技术,将不得不用 node 中间层与服务器端渲染react
、vue
等组件化技术