首页 > 其他分享 >服务端渲染和客户端渲染

服务端渲染和客户端渲染

时间:2024-04-04 23:22:40浏览次数:27  
标签:渲染 前端 SEO 客户端 服务端 页面

1.服务端渲染SSR

将组件或页面通过服务器生成HTML字符串,在发送到游览器,最后将静态标记 “混合”为客户端上完全交互的应用程序。

1.1 优势

  • 利于SEO
    SEO: Search Engine Optimization, 搜索引擎优化
    不同爬虫工作原理类似,只会爬取源码,不会执行网站的任何脚本,使用了React或者其它MVVM框架之后,页面大多数DOM元素都是在客户端根据js动态生成,可供爬虫抓取分析的内容大大减少。
    另外,浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬中就可以抓取到完整页面的信息。

  • 首屏加载快:首页是通过node加载的HTML字符串,用户直接可以看到完整HTML,所以更快。

1.2 弊端

渲染过程由后端完成,会造成服务器压力较大、开发环境受限,服务端渲染中,只会执行到componentDidMount之前的生命周期钩子,不利于前后端分离,开发效率低。

  • 服务端压力较大
    本来是通过客户端完成渲染,现在统一到服务端node服务去做。尤其是高并发访问的情况,会大量占用服务端CPU资源;
    渲染过程在后端完成,那么肯定会耗费后端资源。费流量,即使局部页面的变化也需要重新发送整个页面。不利于前后端分离,开发效率低。

  • 开发环境受限
    在服务端渲染中,只会执行到componentDidMount之前的生命周期钩子,因此项目引用的第三方的库也不可用其它生命周期钩子,这对引用库的选择产生了很大的限制;

2.客户端渲染CSR

随着前端页面的复杂性提高,前端就不仅仅是普通的页面展示了,可能是添加更多功能的组件,复杂性更大,另外,此时 ajax 的兴起,使得页面就开始崇拜前后端分离的开发模式,即后端不提供完整的 html 页面,而是提供一些 api 使得前端可以获取 json 数据,然后前端拿到 json 数据之后再在前端进行 html 页面的拼接,然后展示在浏览器上,这就是所谓的客户端渲染

2.1 优势

节省后端资源,局部刷新页面,多端渲染,前后端分离。

  • 节省后端资源。
    即服务器端完成html模板的解析,如果请求较多,会对服务器造成一定的访问压力。而如果使用前端渲染,就是把这些解析的压力分摊了前端。
  • 便于前后端分离。
    前端专注于前端UI,后端专注于api开发,且前端有更多的选择性,而不需要遵循后端特定的模板.
  • 用户体验更好。
    比如,我们将网站做成SPA或者部分内容做成SPA,这样,尤其是移动端,可以使体验更接近于原生app。
    SPA:single page web application

2.2 弊端

首屏加载时间会比较慢、性能差,白屏,对于SEO无能为力、

  • 前端响应较慢。
    客户端渲染、由于页面显示过程要进行JS文件拉取和React代码执行,前端还需要进行拼接字符串的过程,需要耗费额外的时间,不如服务器渲染的速度快。

  • 不利于SEO
    对于SEO,完全无能为力,因为搜索引擎爬虫只认识html结构的内容,而不能识别JS代码内容。

标签:渲染,前端,SEO,客户端,服务端,页面
From: https://www.cnblogs.com/lwx11111/p/18115317

相关文章

  • django渲染模板与vue的语法冲突解决Flask框架默认WSGI:Werkzeug
    django渲染模板与vue的语法冲突解决Flask框架默认WSGI:Werkzeug Python来说,它有很多web框架,常见的有jango、Flask、Tornado、sanic等,比如Odoo、Superset都基于Flask框架进行开发的开源平台,具有强大的功能。在Linux下,默认使用的WSGIServer一般为Gunicorn,它是一个比较出名的We......
  • TCP客户端及服务器端开发实践
    一、TCP客户端及服务器端开发实践1、TCP网络应用程序开发分类①TCP客户端应用程序开发②TCP服务器端应用程序开发客户端程序是指运行在用户设备上的程序,服务端程序是指运行在服务器设备上的程序,专门为客户端提供数据服务。那如何记忆呢?主动发起建立连接请求的是客户端......
  • Java登陆第三十七天——VUE3响应式基础、条件渲染、列表渲染
    响应式数据什么是响应式数据? 当数据发生改变时,DOM树的内容,会和数据同步更新。 vue3不是自动响应式数据,需要经过函数处理得到响应式数据对象。ref和reactive这两个函数都会返回响应式数据对象,但也有不同。refref通常用于将一个基本类型转为响应式数据对象。基本类型包括:数......
  • 推荐一款超好用的开源SSH客户端:WindTerm
    WindTerm是一个用于DevOps的更快更好的SSH/Te.net/Serial/Shell/SFTP客户端。WindTerm目前仍然处于起步阶段,所以更多功能期待未来开发版本!如果你想要一个高性能的文本编辑器,你可以试试作者开发的免费WindEdit编辑器。功能特色支持SSH、Telnet、Tcp、Shell、Serial支持......
  • Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定
    插值表达式VUE中最基本的数据绑定形式。语法格式如下:{{数据来源}}插值表达式的特点:不依靠标签。可以调用函数。支持运算符。栗子App.vue<scriptsetup>letmsg="字符串";letnum=10;functionf1(){return"有返回值的方法"}letf2=()=>{......
  • 云渲染工具有哪些呢?主流云渲染软件推荐
    ​云渲染技术根据其工具的类型分为两种主要形式:首先,有的渲染软件支持与多种云渲染平台集成,提供了广泛的兼容性以及各种扩展功能,适配不同服务商的具体需求。第二种则是由云渲染服务提供商特别开发的客户端应用,这是为了满足那些希望在云端进行渲染作业的用户,使他们能够更方便地设置......
  • 详解SSL证书系列(9)SSL客户端认证
    上一篇介绍了HTTPS和HTTP协议的区别,理解了HTTP加上加密处理和认证以及完整性保护后即是HTTPS,同时HTTPS也是身披SSL外壳的HTTP,那么SSL客户端认证是怎么回事呢?这篇文章我将带领大家来了解一下。某些Web页面只想让特定的人浏览,或者干脆仅本人可见,为达到这个目标,必不可少的就是认证......
  • 守望先锋/暴雪客户端下载卡45%和97%原因解决
    最近网瘾犯了想OW一把,就下回来玩玩,结果暴雪客户端一直显示updatingbattle.net...(99%)后来发现是原来卸载的时候留存的配置没有删干净。解决办法删除以下路径中的残留配置文件C:\ProgramData下,Battle.net,Battle.net_components,BlizzardEntertainmentC盘用户路径下,找到......
  • 使用QuerryMapper条件查询器进行分页模糊查询,当想要渲染的数据需要两张表的字段该如何
    假如我们想要拿到新闻表的所有数据和发布新闻的用户名称的数据1.创建两张表,其中新闻表的authorId引用用户表的外键id,(这是一张新闻表)(这是一张用户表)author不在这个数据库表中,使用@TableField(exist=false)这个注解,表示这个字段不在新闻表里,用于业务处理。2.拿到分页......
  • 基于Java NIO 写的一个简单版 Netty 服务端
    ASimpleNettyBasedOnJAVANIO基于JavaNIO写的一个简单版Netty服务端前置知识NIONIO一般指同步非阻塞IO,同样用于**描述程序访问数据方式**的还有BIO(同步阻塞)、AIO(异步非阻塞)同步异步指获取结果的方式,同步为主动去获取结果,不管结果是否准备好,异步为等待结果准......