浅尝辄止系列（一）—— 客户端渲染与服务端渲染

服务端渲染：

狭义的理解，就是前后端分离技术流行前传统的模板引擎渲染方式（例如 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），这个以后有机会再来赘述