CSR、SSR、SSG

https://juejin.cn/post/7162775935828115469?searchId=20240925152649DA18B30E9134FD880640#heading-4

客户端渲染(Client-Side Rendering, CSR)在SEO方面存在一些不利因素,主要原因包括:

  1. 初始加载内容的缺乏:CSR依赖于JavaScript来动态生成页面内容。当搜索引擎爬虫访问一个使用CSR技术构建的网站时,它们最初看到的是空壳HTML文档,只有基本的结构和脚本标签。真正的内容是通过执行JavaScript代码后从服务器获取并插入到DOM中的。如果爬虫不能或没有正确执行这些JavaScript代码,它就无法索引页面的实际内容。

  2. JavaScript执行能力:虽然像Google这样的主流搜索引擎已经提高了对JavaScript的支持,并能够执行部分JavaScript以发现更多内容,但并不是所有的搜索引擎都能做到这一点。此外,即使支持JavaScript的搜索引擎也可能不会完全模拟用户行为,比如滚动页面或与页面交互,这意味着某些动态加载的内容可能仍然被忽略。

  3. 延迟索引:由于需要等待JavaScript执行完毕才能看到完整的内容,这可能导致搜索引擎爬虫花费更长的时间来抓取和理解页面。对于更新频繁的网站来说,这种延迟可能会导致新内容不能及时被索引。

  4. 性能问题:CSR通常会导致较高的首次内容绘制时间(First Contentful Paint, FCP)和首次有意义绘制时间(Time to Interactive, TTI),因为用户必须等待所有必要的JavaScript下载、解析并执行之后才能看到有用的内容。这对用户体验有负面影响,而用户体验是现代SEO中越来越重要的因素之一。

  5. 预渲染解决方案:为了解决这些问题,开发者可能会采用预渲染(Prerendering)等技术来提供给搜索引擎预先渲染好的静态版本,但这增加了额外的技术复杂性和维护成本。

  6. 链接发现:在纯CSR应用中,如果导航链接也是通过JavaScript动态添加的,那么搜索引擎可能难以发现和跟随这些链接,从而影响整个站点的索引覆盖率。

为了克服这些挑战,许多开发团队转向了SSR(Server-Side Rendering)或SSG(Static Site Generation),这两种方法都可以确保搜索引擎直接接收到完整的HTML内容,从而提高SEO效果。不过,随着技术的进步,CSR也可以通过适当的优化手段改善其SEO表现。

Server-Side Rendering (SSR)

  1. 即时内容呈现:当搜索引擎爬虫访问一个采用SSR的网站时,它会接收到完整的HTML文档,这意味着页面的内容是立即可见的,而不需要JavaScript来渲染。这对搜索引擎来说非常重要,因为许多爬虫最初可能不会或不能很好地执行JavaScript。

  2. 更好的索引:由于内容是在服务器端就完全渲染好的,所以搜索引擎更容易理解和索引页面上的所有信息,包括文本、链接等,这有助于提高搜索排名。

  3. 改进的性能感知:虽然实际上加载速度取决于多种因素,但SSR可以让用户看到首屏内容更快,这对于SEO中的用户体验指标(如页面加载时间)是有益的。

Static Site Generation (SSG)

什么是 SPA(单页应用)?

单页应用是一种 Web 应用架构模式,它通过 JavaScript 动态地更新页面的内容,而不是每次请求都重新加载整个页面。SPA 的特点包括:

SSG 也能拥有 SPA 的能力

尽管 SSG 通常用于生成静态内容,但现代的框架和技术(如 Next.js、Gatsby 等)允许开发者在 SSG 页面中加入一些 SPA 的特性。这意味着,即使是在一个主要由静态页面组成的网站中,你也可以实现某些部分的动态加载和交互,从而提升用户体验。

如何实现?

示例

假设你有一个博客网站,使用 SSG 技术预先生成了每篇文章的静态页面。当用户浏览文章列表时,点击某篇文章链接并不会触发完整的页面重载,而是通过 JavaScript 动态加载文章内容,并更新当前页面显示的文章信息。这种体验与传统的 SPA 类似,但初始加载速度更快,因为大部分内容已经存在于 HTML 中。

总结

所以,当说“SSG 也拥有 SPA 的能力”时,意思是通过现代前端技术和框架,静态站点可以具备单页应用的一些优点,如流畅的用户体验和动态内容加载,同时保持 SSG 带来的性能和 SEO 优势。这为开发者提供了一种新的方式来平衡静态内容的高效性和动态内容的灵活性

  1. 预构建页面:使用SSG,网站的所有页面都是在构建时预先生成的纯静态HTML文件。这样的页面对搜索引擎非常友好,因为它们可以直接被爬取并索引,没有动态内容加载延迟的问题。

  2. 快速加载:静态站点通常比需要后端处理请求或客户端脚本执行的动态站点加载得更快。较快的加载速度不仅改善了用户体验,也是Google等搜索引擎排名算法中的一个重要因素。

  3. 可靠性与安全性:由于没有服务器端逻辑运行,静态站点减少了潜在的安全风险,并且提供了更高的可用性。这些特性间接地支持了良好的SEO表现。

  4. 降低托管成本:静态站点通常可以部署到CDN上,这样不仅能提供极快的全球访问速度,还能显著减少服务器资源消耗及相关的运营成本。


    一、SSG也是拥有 SPA 的能力,给小白解释下这句话:

    这句话的意思是,静态站点生成(SSG, Static Site Generation)技术也可以提供类似于单页应用(SPA, Single Page Application)的用户体验。为了更好地理解这句话,我们先分别解释一下 SSG 和 SPA 的概念,然后再说明它们如何结合。

    什么是 SSG(静态站点生成)?

    静态站点生成是一种在构建时预先生成 HTML 文件的技术。这些文件可以被直接部署到任何静态文件服务器上。用户访问网站时,浏览器会加载这些预先生成的 HTML 文件。这种方式的好处包括:

  5. 性能:由于页面是预先生成好的,用户可以直接从 CDN 或者服务器缓存中获取,不需要等待后端处理。
  6. SEO 友好:搜索引擎爬虫可以直接抓取和索引纯 HTML 内容,有助于提高搜索排名。
  7. 安全性:没有动态内容生成,减少了潜在的安全风险,比如 SQL 注入等。
  8. 流畅的用户体验:用户操作后的响应更快,因为页面不会完全刷新。
  9. 动态内容:可以通过 AJAX 请求从服务器获取数据,并使用 JavaScript 更新页面内容。
  10. 复杂的交互:可以实现更丰富的用户界面和交互效果。
  11. 客户端路由:使用 JavaScript 处理导航,使得页面切换看起来像 SPA 一样平滑。
  12. 异步数据获取:在页面加载后,通过 API 获取更多数据并更新页面内容。
  13. JavaScript 框架/库:利用 React、Vue 等框架提供的功能,可以在静态页面上实现动态组件和状态管理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/884613.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

​fl studio21.2.3.4004中文版永久2024最新下载安装图文详细使用教程​

随着数字音乐制作的快速发展,越来越多的音乐制作软件涌现出来,而FL Studio无疑是其中的佼佼者。作为一款功能强大、易于上手的音乐制作软件,FL Studio V21中文版在继承了前代版本优秀基因的基础上,进一步提升了用户体验&#xff0…

什么是原生IP?

代理IP的各个类型称呼有很多,且它们在网络使用和隐私保护方面扮演着不同的角色。今天将探讨什么是原生IP以及原生IP和住宅IP之间的区别,帮助大家更好地理解这两者的概念和实际应用,并选择适合自己的IP类型。 一、什么是原生IP? 原…

FPGA-Vivado-IP核-逻辑分析仪(ILA)

ILA IP核 背景介绍 在用FPGA做工程项目时,当Verilog代码写好,我们需要对代码里面的一些关键信号进行上板验证查看。首先,我们可以把需要查看的这些关键信号引出来,接好线通过示波器进行实时监测,但这会用到大量的线材…

【英特尔IA-32架构软件开发者开发手册第3卷:系统编程指南】2001年版翻译,1-1

文件下载与邀请翻译者 学习英特尔开发手册,最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册,会是一件耗时费力的工作。如果有愿意和我一起来做这件事的,那么&#xff…

.NET 工具库高效生成 PDF 文档

QuestPDF 是一个开源 .NET 库,用于生成 PDF 文档。使用了C# Fluent API方式可简化开发、减少错误并提高工作效率。利用它可以轻松生成 PDF 报告、发票、导出文件等。 QuestPDF 是一个革命性的开源 .NET 库,它彻底改变了我们生成 PDF 文档的方式。 Ques…

[Admin] Things Need to Know

List View Bulk Actions Highlight: To take bulk actions on all of the available records in a list, you click the bulk action button without selecting any records.

优雅使用 MapStruct 进行类复制

前言 在项目中,常常会遇到从数据库读取数据后不能直接返回给前端展示的情况,因为还需要对字段进行加工,比如去除时间戳记录、隐藏敏感数据等。传统的处理方式是创建一个新类,然后编写大量的 get/set 方法进行赋值,若字…

鸿蒙开发(NEXT/API 12)【硬件(传感器开发)】传感器服务

使用场景 Sensor Service Kit(传感器服务)使应用程序能够从传感器获取原始数据,并提供振感控制能力。 Sensor(传感器)模块是应用访问底层硬件传感器的一种设备抽象概念。开发者可根据传感器提供的相关接口订阅传感器…

The 2024 CCPC Online Contest (C I J三题思路)

写在前面 因为学弟已经问了几个题了,于是乎这场没有vp,准备直接开写了 题目 C. 种树(树形dp) 题解 只有两种情况, 一种是1-2-3,1是2的父亲,2是3的父亲 另一种是1-2-3,2同时是1…

【网络安全】-访问控制-burp(1~6)

文章目录 前言   1.Lab: Unprotected admin functionality  2.Lab: Unprotected admin functionality with unpredictable URL   3.Lab: User role controlled by request parameter   4.Lab:User role can be modified in user profile  5.Lab: User ID controlled by…

校园二手交易平台的小程序+ssm(lw+演示+源码+运行)

摘 要 随着社会的发展,社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景,运用软件工程原理和开发方法,它主要是采用java语言技术和mysql数据库来完成对系统的设计。整个…

【JavaEE】——线程池大总结

阿华代码,不是逆风,就是我疯, 你们的点赞收藏是我前进最大的动力!!希望本文内容能够帮助到你! 目录 引入:问题引入 一:解决方案 1:方案一——协程/纤程 (1…

多输入多输出预测 | NGO-BP北方苍鹰算法优化BP神经网络多输入多输出预测(Matlab)

多输入多输出预测 | NGO-BP北方苍鹰算法优化BP神经网络多输入多输出预测(Matlab) 目录 多输入多输出预测 | NGO-BP北方苍鹰算法优化BP神经网络多输入多输出预测(Matlab)预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介…

计算机毕业设计 在线问诊系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

市场调研利器 网络问卷的优势及面临的挑战

网络问卷作为市场调研工具,高效便捷、成本低廉、数据准确度高且灵活多样。但其低响应率、数据偏差、隐私与安全及技术依赖等挑战也需关注。企业应优化调研方法,应对挑战,以获取全面市场信息。 一、网络问卷的优势 首先,我们来分析…

vue3 通过 axios + jsonp 实现根据公网 ip, 查询天气信息

前提 安装 axios 的 jsonp 适配器。 pnpm install pingtou/axios-jsonp 简单使用说明:当与后端约定的请求 callback 参数名称不为为 callback 时,可修改。一般无需添加。 1. 获取当前电脑 ip 和城市信息 请求地址: https://whois.pconl…

国庆假节高速免费通行全攻略

关注▲洋洋科创星球▲一起成长! 国庆节假期全国收费公路继续对7座以下(含7座)小型客车免收车辆通行费。 具体免费时段从 10月1日00:00开始 10月7日24:00结束 01 提前出发,免费离开: 如果你在…

视频分割怎么弄?国内外Top 7视频剪辑软件大盘点,新媒体必看!

视频是一种记录美好回忆的工具,无论过去的经历是搞笑还是尴尬,我们总能与他人一同回味那些时光。如果您对某部电影中的特定片段情有独钟,您可以寻找视频分割工具,轻松地对视频进行剪切和合并。分割视频的过程就像剪纸,…

【Oauth2整合gateway网关实现微服务单点登录】

文章目录 一.什么是单点登录?二.Oauth2整合网关实现微服务单点登录三.时序图四.代码实现思路1.基于OAuth2独立一个认证中心服务出来2.网关微服务3产品微服务4.订单微服务5.开始测试单点登录 一.什么是单点登录? 单点登录(Single Sign On&…

代码随想录算法训练营第十七天|654.最大二叉树 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树

654.最大二叉树 给定一个不含重复元素的整数数组。一个以此数组构建的最大二叉树定义如下: 二叉树的根是数组中的最大元素。左子树是通过数组中最大值左边部分构造出的最大二叉树。右子树是通过数组中最大值右边部分构造出的最大二叉树。 通过给定的数组构建最大二…