前端为什么要用服务端渲染？和客户端渲染的区别是什么

SSR（Server Side Render）服务端渲染

说到SSR，老程序员肯定不会陌生，web开发最初的上古时期，wordpress，jsp，javaweb都是服务端渲染，这些技术下开发的程序都是传统的SSR架构，这片博客讲的主要是当前前后端分离模式下前端的服务端渲染

 

为什么要做：

web开发者对于vue，react，angular这样的前端框架肯定并不陌生，近些年大火的vue和react不约而同的使用了Virtual DOM，其核心做法是将网页内容通过js动态挂载到页面中，这就是客户端渲染，具体知识劳烦百度，或看我之前的博客。这样有好处也有弊端

• 好处是这样的网站其实是相对js静态，相对内容动态，而动态内容恰恰是在用户本地跑的，服务端的操作仅需要把打包后的文件交给用户，大大减少了服务器压力，节约了硬件成本
• 坏处是因为本身缺少实际静态的网页内容，对搜索引擎的SEO做起来并不友好，另外不同用户的网络环境，硬件环境不尽相同，实际体验会有差别，而不同的浏览器对于部分代码的解读效果也不同，差异化处理麻烦也很多

基于这些情况，针对前端的SSR应运而生

 

怎么做：

以vue举例，前端SSR是在服务端渲染一个vue实例，将生成的html代码嵌入到html模板中再发给用户，这样用户接到的就是一个已经被渲染好的html文件了，浏览器可以直接开始展示，而这样的渲染模板可以更为方便的的集中处理不同浏览器的差异化部分代码，这样用户在不同的浏览器下访问体验相对一致，SEO也更加友好

市面上相对成熟的SSR框架有针对Vue的Nuxt和针对React的Next，两者采用的都是上述逻辑进行渲染，当然你也可以使用类似createRender（Vue）这样的方法来进行手动渲染，然后填充进模板中，下面是找到的细致讲解（UP：哈默聊前端）

Vue服务端渲染的基本实现

 

优化：

服务端渲染的弊端我刚刚也提到了，很重要的一方面就是对服务器造成更多压力，每次用户请求访问的时候服务器都要进行渲染。针对这个问题我们可以设置缓存进行优化，设置缓存的方式有两种，一种是在中间件里进行缓存，可以单独去设置组件缓存，页面缓存；一种是直接把渲染内容输出成html文件然后通过nginx进行判断缓存时效来返回给用户，（具体细节还在写。。。wwww）

 

网络拓扑：

前端的服务端渲染先决条件是采用了前后端分离，