CSR、SSR、SSG

每天吃饭的羊

已于 2024-09-27 16:55:05 修改

阅读量538

点赞数 16

分类专栏： # 第一次见你文章标签：前端

于 2024-09-25 11:34:26 首次发布

本文链接：https://blog.csdn.net/m0_47999208/article/details/142518994

版权

第一次见你专栏收录该内容

53 篇文章 0 订阅

订阅专栏

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

客户端渲染（Client-Side Rendering, CSR）在SEO方面存在一些不利因素，主要原因包括：

初始加载内容的缺乏：CSR依赖于JavaScript来动态生成页面内容。当搜索引擎爬虫访问一个使用CSR技术构建的网站时，它们最初看到的是空壳HTML文档，只有基本的结构和脚本标签。真正的内容是通过执行JavaScript代码后从服务器获取并插入到DOM中的。如果爬虫不能或没有正确执行这些JavaScript代码，它就无法索引页面的实际内容。
JavaScript执行能力：虽然像Google这样的主流搜索引擎已经提高了对JavaScript的支持，并能够执行部分JavaScript以发现更多内容，但并不是所有的搜索引擎都能做到这一点。此外，即使支持JavaScript的搜索引擎也可能不会完全模拟用户行为，比如滚动页面或与页面交互，这意味着某些动态加载的内容可能仍然被忽略。
延迟索引：由于需要等待JavaScript执行完毕才能看到完整的内容，这可能导致搜索引擎爬虫花费更长的时间来抓取和理解页面。对于更新频繁的网站来说，这种延迟可能会导致新内容不能及时被索引。
性能问题：CSR通常会导致较高的首次内容绘制时间（First Contentful Paint, FCP）和首次有意义绘制时间（Time to Interactive, TTI），因为用户必须等待所有必要的JavaScript下载、解析并执行之后才能看到有用的内容。这对用户体验有负面影响，而用户体验是现代SEO中越来越重要的因素之一。
预渲染解决方案：为了解决这些问题，开发者可能会采用预渲染（Prerendering）等技术来提供给搜索引擎预先渲染好的静态版本，但这增加了额外的技术复杂性和维护成本。
链接发现：在纯CSR应用中，如果导航链接也是通过JavaScript动态添加的，那么搜索引擎可能难以发现和跟随这些链接，从而影响整个站点的索引覆盖率。

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

Server-Side Rendering (SSR)

即时内容呈现：当搜索引擎爬虫访问一个采用SSR的网站时，它会接收到完整的HTML文档，这意味着页面的内容是立即可见的，而不需要JavaScript来渲染。这对搜索引擎来说非常重要，因为许多爬虫最初可能不会或不能很好地执行JavaScript。
更好的索引：由于内容是在服务器端就完全渲染好的，所以搜索引擎更容易理解和索引页面上的所有信息，包括文本、链接等，这有助于提高搜索排名。
改进的性能感知：虽然实际上加载速度取决于多种因素，但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 优势。这为开发者提供了一种新的方式来平衡静态内容的高效性和动态内容的灵活性

预构建页面：使用SSG，网站的所有页面都是在构建时预先生成的纯静态HTML文件。这样的页面对搜索引擎非常友好，因为它们可以直接被爬取并索引，没有动态内容加载延迟的问题。
快速加载：静态站点通常比需要后端处理请求或客户端脚本执行的动态站点加载得更快。较快的加载速度不仅改善了用户体验，也是Google等搜索引擎排名算法中的一个重要因素。
可靠性与安全性：由于没有服务器端逻辑运行，静态站点减少了潜在的安全风险，并且提供了更高的可用性。这些特性间接地支持了良好的SEO表现。
降低托管成本：静态站点通常可以部署到CDN上，这样不仅能提供极快的全球访问速度，还能显著减少服务器资源消耗及相关的运营成本。

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

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

什么是 SSG（静态站点生成）？

静态站点生成是一种在构建时预先生成 HTML 文件的技术。这些文件可以被直接部署到任何静态文件服务器上。用户访问网站时，浏览器会加载这些预先生成的 HTML 文件。这种方式的好处包括：
性能：由于页面是预先生成好的，用户可以直接从 CDN 或者服务器缓存中获取，不需要等待后端处理。
SEO 友好：搜索引擎爬虫可以直接抓取和索引纯 HTML 内容，有助于提高搜索排名。
安全性：没有动态内容生成，减少了潜在的安全风险，比如 SQL 注入等。
流畅的用户体验：用户操作后的响应更快，因为页面不会完全刷新。
动态内容：可以通过 AJAX 请求从服务器获取数据，并使用 JavaScript 更新页面内容。
复杂的交互：可以实现更丰富的用户界面和交互效果。
客户端路由：使用 JavaScript 处理导航，使得页面切换看起来像 SPA 一样平滑。
异步数据获取：在页面加载后，通过 API 获取更多数据并更新页面内容。
JavaScript 框架/库：利用 React、Vue 等框架提供的功能，可以在静态页面上实现动态组件和状态管理。