CSR 和SSR分别是什么
CSR (Client-Side Rendering) 和 SSR (Server-Side Rendering) 是两种不同的网页渲染方式,它们决定了浏览器如何获取和展示网页内容:
- CSR (Client-Side Rendering):
- 定义:客户端渲染是指网页内容的生成和渲染主要在用户浏览器端(客户端)完成。
当用户访问一个网站时,服务器首先返回一个基本的HTML结构(通常包含必要的脚本标签和样式表引用),这个结构中通常不含或仅含少量静态内容。
随后,浏览器下载并执行这些脚本(通常使用JavaScript框架如React、Vue、Angular等),脚本从服务器或API获取数据,然后动态生成并渲染网页的实际内容。
- 定义:客户端渲染是指网页内容的生成和渲染主要在用户浏览器端(客户端)完成。
- 特点:
- 延迟加载:初始加载时,用户可能先看到一个空白页面或占位符,随着脚本执行和数据加载完成,页面内容逐步填充。
- 动态交互:由于内容在客户端渲染,页面更新和交互响应通常更快,用户体验更流畅。
- SEO挑战:搜索引擎爬虫可能无法正确抓取到动态生成的内容,对SEO友好性有一定影响,需要额外的SEO优化措施(如预渲染、SSR配合等)。
- SSR (Server-Side Rendering):
- 定义:服务器端渲染是指网页内容的生成和初步渲染在服务器端完成。
当用户访问网站时,服务器接收到请求后,直接生成完整的HTML页面(包括数据填充),并将这个完整的页面发送给浏览器。
浏览器接收到后,可以直接呈现给用户,无需等待额外的脚本执行。
- 定义:服务器端渲染是指网页内容的生成和初步渲染在服务器端完成。
- 特点:
- 快速首屏渲染:用户几乎立刻能看到页面主要内容,首屏加载速度快,改善用户体验,尤其是对于低网速或弱设备的用户。
- SEO友好:搜索引擎爬虫可以直接抓取到服务器返回的完整HTML,包含所有的内容信息,有利于SEO优化。
- 服务器负载较高:服务器需要承担更多的计算和渲染工作,可能增加服务器负担,尤其是在高并发场景下。
此外,服务器端渲染的代码通常需要兼顾服务器和客户端环境,增加了开发复杂性。
总结来说,CSR和SSR各有优劣,适用于不同的场景。CSR强调客户端的交互性和动态性,适合对交互要求较高、SEO需求不迫切的现代Web应用。
而SSR重视首屏加载速度和SEO优化,更适合内容为主的网站、需要快速呈现首屏内容的场景以及对SEO有严格要求的应用。
实际项目中,有时还会采用同构(Isomorphic)或预渲染(Prerendering)等混合策略,结合CSR和SSR的优点,以适应不同需求。
__EOF__

本文作者:龙陌
本文链接:https://www.cnblogs.com/longmo666/p/18106077.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
本文链接:https://www.cnblogs.com/longmo666/p/18106077.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2023-03-30 Yalc 思维导图