服务端渲染:
狭义的理解,就是前后端分离技术流行前传统的模板引擎渲染方式(例如 Java 的 JSP,C# 的 Razor)
大致的流程就是这样:
浏览器向服务端发送请求 -->
服务端在接收到请求之后,取得相关数据 -->
利用这些数据拼接好页面 -->
将这个页面返回给浏览器 -->
浏览器直接把页面渲染出来
客户端渲染:
狭义的理解,就是现在流行的前后端分离,前端的渲染方式
在这里可以思考下使用前后端分离技术后,和传统的模板引擎开发有什么区别
大致的流程:
浏览器请求前端部署的静态资源(html , js , css 等等) -->
将静态资源渲染出来 -->
页面上的 Js 向后端部署的接口发送请求(ajax)并接收返回数据 -->
前端用自己的方式将数据填充到页面上
所以不想深入探究的话,可以简单的就理解成:
服务端渲染就是后端利用模板引擎生成页面,客户端渲染就是前端利用ajax请求生成页面
各自的优缺点:
服务端渲染最大也是最核心的两个优点:SEO和首屏渲染快,而这恰恰是客户端渲染最大的两个缺点
客户端渲染,优点很多:
1.前后端分离,让专业的人做专业的事,前端开发可以掌握更多的话语权,后端开发也不用再为写前台交互绞尽脑汁
2.ajax 的好处众所周知,局部刷新
3.节约服务器的性能,这个很容易理解吧,服务端渲染服务器既要取数据,又要拼页面,现在前端把拼接页面的活拿过去了,服务器自然轻松很多
4.除首页之外性能响应很快
服务端渲染的缺点:
1.技术老旧,传统的模板引擎已经跟不上时代了(很少有人在比较时提到这一点,但我觉得这恰恰应该是程序员关注的点)
2.前后端耦合性太大
客户端渲染的缺点上面已经提到
使用场景:
阻碍使用客户端渲染最大的问题就是SEO
只要不是需要SEO的场景,都可以考虑使用客户端渲染的技术,前后端分离开发。
那么问题来了,如果我既想前后端分离开发,又想支持SEO怎么办?
现在已经有了同构渲染的概念,又叫前端的服务端渲染(例如 Vue 的 Nuxt,React 的 Next),这个以后有机会再来赘述