深入了解网站优化：SSR、SSG、ISR、CSR 和 SEO

Yan.love

已于 2024-12-14 23:06:01 修改

阅读量1.2k

点赞数 19

文章标签：前端 chrome 服务器性能优化

于 2024-12-03 21:45:34 首次发布

本文链接：https://blog.csdn.net/Fang_20/article/details/144223845

版权

每当我们谈到网站开发，常常会听到“SEO优化”、“SSR”这些术语，它们看似复杂，但实际上它们与我们日常上网的体验息息相关。今天，我就带你一起了解这些技术背后的秘密，让你在开发网站时，不仅能让用户更快速地获取信息，还能让搜索引擎喜欢你的网站，从而获得更多的流量。本文通过是什么、优缺点来解释不同词，希望能给你带来一些启发。

1. 服务端渲染（SSR）

在传统的网站开发中，页面的内容是由浏览器通过执行 JavaScript 来渲染的。这种方式叫做 客户端渲染（CSR）【是不是看到这个词还陌生，别怕，后面有相应的内容😁】，但是它的问题在于，首次加载页面时，用户必须等待 JavaScript 加载完毕，页面才会显示出来，这导致 加载速度慢，用户体验不佳。

服务端渲染（SSR） 则是一个不同的概念。简单来说，SSR 是在 服务器端 生成 HTML 页面（只包括基本的HTML元素和CSS样式，还没有JS脚本），然后将生成的页面直接发送给浏览器。用户一打开网页，就可以看到完整的内容，而不需要等待 JavaScript 加载。

为什么使用 SSR？

更快的首屏加载：因为服务器已经生成好了完整的 HTML 页面，浏览器只需要解析 HTML，就能立即显示内容。
更好的 SEO：搜索引擎爬虫能快速抓取到完整的 HTML 页面内容，而无需等待浏览器加载并执行 JavaScript，这使得 SSR 在 SEO 上具有很大优势。

举个例子：

想象一下，你在访问一个博客网站，使用 SSR 时，服务器直接返回包含了 博客标题、正文、作者等完整内容的 HTML 页面，而不需要浏览器等到 JavaScript 执行完才显示内容。这样，用户体验会更加流畅，尤其对于 搜索引擎优化（SEO），它会更容易抓取到网站的全部信息。

使用 Nuxt.js 实现 SSR

如果你使用的是 Vue.js，那么 Nuxt.js 是一个非常棒的框架，可以轻松实现 SSR。Nuxt 会根据你的开发模式（开发模式和生产模式）自动处理 SSR 的相关配置，极大简化了开发流程。

在 开发模式下，Nuxt 会实时生成页面并返回 HTML。
在 生产模式下，它通过构建生成静态页面，提升 SEO 和首次加载速度。

2. 静态页面生成（SSG）

静态页面生成（SSG），顾名思义，是指在 构建时（如使用 npm run build） 将网站页面的内容预先生成成 静态 HTML 文件。这些文件会被部署到服务器或者 CDN 上，用户访问时，直接从这些已经生成好的 HTML 文件中加载页面。

为什么选择 SSG？

快速的页面加载：静态页面本身就已经是 HTML 文件，用户不需要等待服务器生成，加载速度非常快。
适用于不常更新的内容：如果你的网站内容更新不频繁，使用 SSG 生成静态页面是最优解。
SEO 友好：静态页面非常适合 搜索引擎爬虫 的抓取，能够帮助提升网站的 SEO 排名。

举个例子：

假设你发布了一篇新的博客，SSG 会在构建时将该博客的内容生成一个静态 HTML 文件。当用户访问时，直接从服务器或 CDN 获取这个已经生成好的 HTML 文件，整个过程非常迅速。

SSG 的工作流程：

构建阶段：执行 npm run build，框架会根据页面模板和数据生成所有页面的静态 HTML 文件。
部署阶段：这些文件被部署到 Web 服务器或 CDN 上。
请求阶段：用户访问时，直接从服务器或 CDN 获取已生成的 HTML 页面，速度非常快。

3. 增量静态再生（ISR）

增量静态再生（ISR） 是 Next.js 提供的一个功能，它是对 SSG 的扩展，特别解决了 静态内容更新 的问题。

ISR 是如何工作的？

初始生成：在构建时，页面会被生成成静态 HTML 并部署。
增量更新：当用户请求某个页面时，如果该页面的缓存已过期，ISR 会 重新生成 该页面的 HTML 内容，而不会重新生成整个网站。
缓存过期时再生成：重新生成的页面会缓存一段时间，再次请求时直接返回缓存的页面，直到缓存过期。假如有一个60s的缓存过期时间，那么在这个时间之内访问此页面，都是会从缓存中取数据，如果超过这个时间，并且没有请求，也不会重新从服务器中获取内容到缓存中，只有再次发送请求之后，才会更新缓存内容。因为这样做可以节约服务器的资源。

看到增量更新，重新生成需要更新的内容，不知道各位有没有跟我一样一开始的时候会有所不解，我大概以我的进一步了解来解释一下，我们循序渐进地来说一下：

HTML 文件 包含静态结构（如头部、导航、样式、脚本）和 动态内容（如博客文章的正文、评论数）。

ISR 能够通过 缓存管理 和 增量更新 机制，仅仅 更新需要更改的动态内容（如文章的标题、正文），而不重新生成整个 HTML 文件。

局部更新：在生成静态页面时，数据动态插入到模板（HTML文件中会定义好一些动态获取内容来展示的模板）中。例如，博客文章的标题、内容和时间都是根据 数据源（比如数据库或文件系统）动态插入的。因此，生成的 HTML 文件会包含这部分内容，当页面更新时，只需重新生成这些 动态内容 部分，而不需要重新构建整个 HTML 页面。

4. 客户端渲染（CSR）

客户端渲染（CSR） 是一种非常常见的前端技术，它将 页面渲染的工作交给浏览器，通过 JavaScript 动态生成页面内容。简单来说，当用户访问页面时，浏览器会加载一个简单的 HTML 文件（通常只有一个容器 <div id="app"></div>，许多框架中就是这样的），然后通过 JavaScript 动态生成并渲染完整的页面内容。

CSR 的工作原理：

用户请求页面：用户访问网站时，浏览器向服务器发送请求。
加载基础 HTML 文件：服务器返回一个基础的 HTML 页面，里面只有一个容器 <div id="app"></div>。
加载 JavaScript 文件：浏览器加载并执行 JavaScript 文件。
动态生成页面内容：JavaScript 会通过操作 DOM 将页面内容动态渲染出来，最终显示给用户。
交互：用户与页面的交互（如点击、输入等）会通过 JavaScript 更新页面，而不需要重新加载整个页面。

CSR 的优缺点

优点：

高效的页面交互：一旦 JavaScript 加载完成，页面可以非常迅速响应用户操作，提升用户体验。
减少服务器负担：所有渲染工作都交给了浏览器，服务器主要负责提供数据和静态资源。
组件化开发：CSR 适合构建 单页应用（SPA），可以灵活地管理和控制页面组件。

缺点：

首次加载较慢：由于浏览器需要加载并执行 JavaScript，页面的首次渲染可能会比较慢，尤其在 JavaScript 文件较大时。
SEO 不友好：搜索引擎爬虫可能无法抓取通过 JavaScript 动态生成的内容，影响网站的 SEO。比如通过 Vue 等框架中的模板语法 {{data}} ，在发送请求响应回来之后其实还是没有渲染的，而是要等加载了 js 脚本之后才动态渲染，所以不利于 SEO 优化。