SSR（服务器端渲染）与 SSG（静态站点生成）详解

1. SSR（服务器端渲染）

定义：SSR 是指在服务器端将网页内容渲染成 HTML 并发送给客户端的技术。客户端接收到的是已经包含内容的 HTML 页面，而不是空白的 HTML 框架。

工作原理：

• 用户请求页面时，服务器接收到请求。
• 服务器根据请求动态生成 HTML 内容。
• 服务器将生成的 HTML 发送给客户端。
• 客户端接收到 HTML 后，直接显示内容，并执行 JavaScript 以实现交互。

优点：

• SEO 友好：由于页面内容在服务器端已经生成，搜索引擎可以更容易地抓取和索引页面内容。
• 首屏加载速度快：用户在首次请求时就能看到完整的内容，无需等待 JavaScript 执行。
• 动态内容支持：SSR 适合需要频繁更新或根据用户请求动态生成内容的场景。

缺点：

• 服务器压力大：每次请求都需要服务器进行渲染，增加了服务器的负载。
• 开发复杂度高：需要处理服务器端和客户端的代码，增加了开发的复杂性。

案例：

• Next.js：Next.js 是一个流行的 React 框架，支持 SSR。例如，一个电商网站使用 Next.js 进行 SSR，用户在访问商品详情页时，服务器会根据商品 ID 动态生成页面内容，并发送给客户端。

2. SSG（静态站点生成）

定义：SSG 是指在构建时（build time）生成静态 HTML 文件的技术。这些静态文件可以部署到 CDN 上，用户请求时直接返回静态 HTML 文件。

工作原理：

• 在构建时，根据数据和模板生成静态 HTML 文件。
• 生成的静态文件部署到 CDN 或其他静态文件服务器。
• 用户请求页面时，直接返回预先生成的静态 HTML 文件。

优点：

• 性能优异：静态文件可以直接从 CDN 获取，加载速度快，用户体验好。
• 成本低：无需服务器进行实时渲染，降低了服务器成本。
• 安全性高：静态文件不涉及动态内容生成，减少了安全风险。

缺点：

• 不适合动态内容：SSG 适合内容变化不频繁的场景，如博客、文档站点等。
• 构建时间长：如果站点规模较大，构建时间可能会很长。

案例：

• Gatsby：Gatsby 是一个基于 React 的静态站点生成器。例如，一个博客网站使用 Gatsby 生成静态页面，所有文章在构建时生成对应的 HTML 文件，用户访问时直接返回静态文件，无需服务器渲染。

3. SSR 与 SSG 的对比

| 特性 | SSR | SSG | |---------------|----------------------------------|----------------------------------| | 渲染时机 | 请求时渲染 | 构建时渲染 | | 性能 | 首屏加载快，但服务器压力大 | 加载速度快，服务器压力小 | | SEO | 友好 | 友好 | | 动态内容 | 支持 | 不支持 | | 开发复杂度| 高 | 低 |

4. 适用场景

• SSR：适合需要频繁更新内容或根据用户请求动态生成内容的场景，如电商网站、社交网络等。
• SSG：适合内容变化不频繁的场景，如博客、文档站点、企业官网等。

5. 综合案例

假设有一个新闻网站，首页需要展示最新的新闻列表，而新闻详情页的内容相对稳定。在这种情况下，可以使用 SSR 来动态生成首页，确保用户每次访问都能看到最新的新闻列表；而对于新闻详情页，可以使用 SSG 生成静态页面，减少服务器压力并提高加载速度。