众所周知，如今，Web应用已经广泛应用于各个行业的业务场景中。另一方面，桌面应用越来越少或越来越轻。Web编程技术的应用，从最初的静态网站发展到后来的动态网站，此时无论是静态网站还是动态网站，都是由服务器来渲染的。
服务器端SSR编程技术框架基本以ASP、JSP、PHP为代表。后来随着业务场景越来越多，交互越来越频繁，动态网站的应用肯定是大势所趋。而服务器端渲染SSR的弊端，如“无论一个页面的数据是大还是小的变化，服务器都需要一次访问整个页面，使得服务器的性能瓶颈凸显”，越来越阻碍业务的发展。在此期间，恒空出现了一种异步加载技术，即AJAX。缓解SSR性能瓶颈的解决方案是使用AJAX技术实现“部分页面刷新”，而不是每次刷新整个页面，但是前端开发的复杂度大大增加了。如果页面承载了复杂的业务功能，那么这个页面的前端代码的复杂程度是可以想象的高。
后来以Angular、React、VUE等为代表的客户端渲染编程技术框架。出现了，彻底解决了SSR的性能瓶颈，但是带来了新的问题，比如首屏加载速度慢，SEO不友好。所以，SSR转CSR虽然是跨越式发展的重要一步，但是说CSR会取代SSR，答案是否定的，实际上还是要根据实际的业务需求来决定谁更适合。比如中台或后台系统是推荐采用CSR机制的技术框架，前台系统推荐SSR机制的技术框架。
一、客户呈现企业社会责任
在客户端渲染CSR之前，我们必须先说说单页应用SPA。Angular，React，VUE技术框架的核心是一个SPA应用程序。整个应用只有一个HTML页面，只和后台服务器进行数据上的交互，所以不会请求其他HTML页面。所以浏览器在访问应用之初会加载所有必须的HTML、CSS和Javascript，所有操作都在这个HTML页面上完成，后面页面的交互动作和数据交互都由Javascript控制。而且这个HTML页面上的“静态”内容是一样的，动态内容完全是在页面的DOM中交互完成的，用户无法直接观看。
所以客户端渲染CSR存在首屏加载速度慢，SEO不友好等缺点。其加载步骤如下:
在客户端运行JS时，用户第一次发送请求时只能得到少量的指令性HTML代码，比如加载的LOGO。
第二个请求将加载所有必要的HTML、CSS和Javascript，直到客户端上的DOM呈现完成，才能看到整个页面。
用户在页面上做交互动作时，只要不向服务器请求数据，就完全在客户端完成，也就是用户交互速度快。
第二，服务器渲染SSR
服务器端渲染SSR的核心优势在于首屏渲染的速度块。简单来说，它不需要在客户端和服务器之间来回加载和交互。但是它的性能和其他很多因素都会影响用户体验，比如网速，在线活跃人数，服务器的物理位置等等。这就解释了为什么在客户端渲染CSR普及之前，需要来自网管的CDN加速支持。CDN机制更适合静态网站加速，不适合动态网站加速，尤其是交互场景复杂的动态网站。
客户端渲染CSR与服务器端渲染SSR正好相反，与服务器的多次交互导致首屏加载缓慢。但这些请求一旦完成，用户与页面的交互体验会好很多，更适合前端交互多的业务场景系统。
服务器端渲染SSR机制是将一个完整的HTML页面内容发送给客户端浏览器，客户端只负责HTML解析。但会受到网速等客观因素的制约，导致用户体验不佳。如果客户端和服务器多次频繁交互，会非常不利。即使页面只做了微小的改变，也需要重新请求和重新呈现一个完整的页面。假设使用AJAX本地刷新机制，必然会导致开发复杂度突然增加。所以在SSR机制下，虽然首屏加载速度快，但是页面加载不上或者期间出现卡顿现象的概率比较高，异地用户访问顺畅不一定是因为客户端和服务器之间的网络路径。
简而言之，两者的核心区别在于页面完整的HTML字符串拼接是在服务器端还是客户端完成的。另外，从另一个角度看，SSR强在首屏渲染速度，CSR强在客户端交互体验多的用户场景。还有，SSR在SEO友好性上很强，CSR在数据安全性上很强。总之，两者各有千秋，各有千秋。芝麻和豆子都很重要，主要看使用场景。芝麻和豆子可以榨油，豆子也可以做豆腐等豆制品，芝麻可以做芝麻球和月饼。
*技术营销人员在Codebook.com上写的，原由百家转发。
