客户端渲染和服务端渲染的区别（转）

服务端渲染 ：DOM树在服务端生成，然后返回给前端。

客户端渲染 （SSR）：前端去后端取数据生成DOM树。

服务端渲染的优点 ：

1、尽量不占用前端的资源，前端这块耗时少，速度快。

2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。

服务端渲染的缺点 ：

1、不利于前后端分离，开发的效率降低了。

2、对html的解析，对前端来说加快了速度，但是加大了服务器的压力。

客户端渲染的优点 ：

1、前后端分离，开发效率高。

2、用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。

客户端渲染的缺点 ：

1、前端响应速度慢，特别是首屏，这样用户是受不了的。

2、不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。

服务端和客户端渲染的区别 ：

1、二者本质的区别：是谁来完成了html的完整拼接，服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。

2、响应速度：服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。

3、SEO优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息，客户端渲染不利于SEO优化。

4、开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。

直观的区分服务端渲染和客户端渲染：

源码里如果能找到前端页面中的内容文字，那就是在服务端构建的DOM，就是服务端渲染，反之是客户端渲染。

应该使用服务端渲染还是客户端渲染：

我们要根据业务场景去选择渲染的方式。

如果是企业级网站，主要功能是页面展示，它没有复杂的交互，并且需要良好的SEO，那我们应该使用服务端渲染。

如果是后台管理页面，交互性很强，它不需要考虑到SEO，那我们应该使用客户端渲染。

具体使用哪种渲染方式也不是绝对的，现在很多网站使用 服务端渲染和客户端渲染结合 的方式：首屏使用服务端渲染，其他页面使用客户端渲染。这样可以保证首屏的加载速度，也完成了前后端分离。

react.js在服务器端渲染好处：

提升性能是需要再浏览器端的性能提升还是服务端的 性能提升，是两个概念，服务端渲染会给服务端造成一定的压力，减轻客户端的压力；好处：在整个页面级别的应用会使得浏览器在解析dom完成之后马上有东西可以渲染。再者就是对seo比较友好一些；

渲染的流程主要是：

准备数据，一般从数据库或外部API获得 (一般要先 render React 一次，去触发所需的API)

数据和React结合生成HTML Markup

除了把HMTL Markup输出外， 还要把'State'输出，这要在客户端才能保留'State'

举个商品列表页面为例子。

前端渲染：说的应该是刚进入页面时，商品列表这些数据都不给你，不会渲染出这些数据。然后加载script时，再用ajax或者fetch之类的发起了请求另一个接口，服务端返回了商品列表的json数据给你，你在js中用模板引擎之类的技术，把这些数据拼成html字符串插入到Dom里。

服务端渲染：服务端用php的smarty模板或者java的jsp，把页面的商品列表信息渲染出来了，返回一个html给浏览器了。

区别：如果页面要求被蜘蛛抓取，前端渲染的数据就不能被抓取到，但是服务端渲染的页面就能被抓取到。如果有SEO要求，只能用服务端渲染。如果用Node.js渲染的话，那就都没这些问题了。

---