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

最新推荐文章于 2024-09-07 18:13:20 发布

B~~

最新推荐文章于 2024-09-07 18:13:20 发布

阅读量617

点赞数 1

分类专栏： nodejs 客户端服务端文章标签： nodejs

本文链接：https://blog.csdn.net/Q111900/article/details/110294450

版权

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

页面的渲染工作都是由浏览器来完成的，服务器只是负责提供数据。前端去后端取数据生成DOM树。

**最少两次请求 **

前后端分离。前端专注于前端UI，后端专注于api开发，且前端有更多的选择性，而不需要遵循后端特定的模板。
用户体验更好，可以尽早地把页面展示给用户。比如，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，这样，尤其是移动端，可以使体验更接近于原生app，不会频繁的跳转

前端响应较慢。可能需要向服务器请求多次数据。如果数据很多的话，需要耗费大量的时间，不如服务器端渲染速度快。
不利于SEO优化。目前比如百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，所以SEO很差。因为服务器端可能没有保存完整的html，而是前端通过js进行dom的拼接，那么爬虫无法爬取信息。除非搜索引擎的seo可以增加对于JavaScript的爬取能力，这才能保证seo。

页面渲染的工作都是由服务端来完成的，数据也是由服务端提供的，浏览器只负责展示页面内容。也就是DOM树在服务端生成，然后返回给前端。

只有一次请求，相应的就是最终结果，客户端不需要再做任何处理

var 渲染结果 = template.render(模板字符串，{解析替换对象})
response.end(渲染结果)

1、有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息，更有利于seo。
2、无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析标准的html页面即可，这样对于客户端的资源占用更少，耗时少，速度快，尤其是移动端，也可以更省电。
3、后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效。

不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，则对于前端复杂度高的项目，不利于项目高效开发。另外，如果是服务器端渲染，则前端一般就是写一个静态html文件，然后后端再修改为模板，这样是非常低效的，并且还常常需要前后端共同完成修改的动作；或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端还需要根据改动的模板再调节css，这样使得前后端联调的时间增加。
占用服务器端资源。即服务器端完成html模板的解析，如果请求较多，会对服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实完全交给了一个服务器。

服务端渲染是在服务端生成DOM树，客户端渲染是在客户端生成DOM树。
服务端渲染会加快页面的响应速度，客户端渲染页面的响应速度慢。
客户端异步渲染是很难被爬虫抓取到的，渲染不利于SEO搜索引擎优化。而服务端渲染是可以被爬虫抓取到的。但是真正的网站既不是纯异步也不是纯服务端渲染出来的而是两者结合来做的
- 例如京东的商品列表就采用的是服务端渲染，目的了为了SEo搜索引擎优化
- 而它的商品评论列表为了用户体验，而且也不需要 S印优化，所以采用是客户端渲染
服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低，客户端渲染是采用前后端分离的方式开发，效率更高。