什么是前端渲染和后端渲染?
前言
早期的网站,几乎所有都使用 ASP、Java、PHP 这类做后端渲染,但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起,开始转向了前端渲染。从 2014 年起又开始流行了同构渲染,号称是未来,集成了前后端渲染的优点,但多年过去,很多当时壮心满满的框架(rendr、Lazo)从先驱变成了先烈。同构到底是不是未来?自己的项目该如何选型?我想不应该只停留在追求热门和拘泥于固定模式上,忽略了前后端渲染之“争”的“核心点”,关注如何提升“用户体验”。
后端渲染(服务器端渲染)
早期的网站开发整个HTML页面是由服务器来渲染的,服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示。
后端渲染过程(如下图):
- 一个页面有自己对应的网址,也就是URL
- URL会发送到服务器,服务器会通过正则对该URL进行匹配,并且最后交给一个Controller处理
- Controller进行各种处理,最终生成HTML或者数据,返回给前端
- 这就完成了一个IO操作
后端渲染的优势:
- 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面(首屏性能)
- 利于SEO
后端渲染的缺点:
- 整个页面的模块由后端人员来编写和维护
- HTML代码和数据以及对应的逻辑会混在一起,编写和维护都是非常糟糕的
前端渲染
前端渲染的方式起源于JavaScript的兴起,ajax的大热更是让前端渲染更加成熟,前端渲染真正意义上的实现了前后端分离,前端只专注于UI的开发,后端只专注于逻辑的开发,前后端交互只通过约定好的API来交互,后端提供json数据,前端通过ajax获取数据,并通过js把数据渲染到页面上去。
前端渲染优势:
- 前后端责任清晰,后端专注于数据上,前端专注于交互和可视化上
- 局部刷新。无需每次都进行完整页面请求
- 网络传输数据量小
前端渲染缺点:
- 前端耗时较多,不利于SEO
SPA(单页面富应用)阶段
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由,也就是前端来维护一套路由规则。(例如vue里组件对应一个路由)
改变URL不会去服务器请求新的资源,因为改变的是前端路由。当然如果刷新的话还是会向服务器发送请求。
参考资料:https://www.bilibili.com/video/BV15741177Eh?p=101
https://github.com/camsong/blog/issues/8