14.JS学习篇-CSR和SSR

在前端开发中,CSR(Client-Side Rendering,客户端渲染)和 SSR(Server-Side Rendering,服务端渲染)是两种不同的渲染方式。

一、CSR(客户端渲染)

1.工作原理
  • 浏览器首先下载一个 HTML 页面,这个页面通常只包含基本的 HTML 结构和一些加载 JavaScript 脚本的标签。
  • 当页面加载完成后,JavaScript 脚本开始运行,从服务器获取数据(通常通过 API 请求)。
  • 然后,JavaScript 框架(如 React、Vue.js 等)使用获取到的数据在客户端生成页面的最终内容,并将其插入到 HTML 页面中进行展示。
2.优点
  • 更好的用户体验:页面可以在加载初始 HTML 后快速显示一些基本内容,然后随着 JavaScript 的加载和数据的获取逐渐变得更加丰富和交互性强。
  • 分离关注点:前端和后端可以独立开发,开发效率较高。
  • 易于部署:只需要部署静态资源和后端 API,相对简单。
3.缺点
  • SEO 不友好:搜索引擎爬虫在抓取页面时,可能无法执行 JavaScript,因此无法看到完整的页面内容,这会影响网站在搜索引擎中的排名。
  • 首次加载时间较长:因为需要下载大量的 JavaScript 代码和数据,导致首次加载页面的时间较长。

以下是一些支持前端开发中 CSR(客户端渲染)的框架:React,Vue,Angular

二、SSR(服务端渲染)

1.工作原理
  • 当用户请求一个页面时,服务器接收到请求后,在服务器端运行前端框架,生成完整的 HTML 页面。
  • 服务器将生成的 HTML 页面发送给浏览器,浏览器直接显示这个页面,无需等待 JavaScript 加载和数据获取。
2.优点
  • SEO 友好:搜索引擎爬虫可以直接看到完整的页面内容,有利于提高网站在搜索引擎中的排名。
  • 更快的首次加载时间:因为服务器已经生成了完整的页面,浏览器无需等待 JavaScript 加载和数据获取,所以首次加载时间较短。
3.缺点
  • 服务器压力较大:服务器需要为每个请求生成完整的 HTML 页面,这会增加服务器的负载。
  • 开发复杂度较高:需要同时考虑前端和后端的开发,并且需要处理服务器端和客户端的状态管理等问题。

开发过程中,如果注重用户体验和开发效率,可以选择 CSR;如果注重 SEO 和首次加载时间,可以选择 SSR。也可以考虑采用混合渲染的方式,结合两者的优点,以达到更好的效果。

相关推荐
某公司摸鱼前端1 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~1 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's3 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim4 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim4 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心4 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络4 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺6 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear6 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息6 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js