在Web 开发中，页面渲染方式直接影响用户体验、性能优化乃至搜索引擎优化（SEO）效果。本文将详细解释三种主流的渲染方式：SSR（Server-Side Rendering）、SSG（Static Site Generation）和 CSR（Client-Side Rendering），并重点分析它们对 SEO 的影响。

一、什么是 SSR、SSG 和 CSR？

1. SSR（Server-Side Rendering，服务器端渲染）

SSR 是指在服务器端生成完整的 HTML 页面，然后返回给浏览器进行展示。每当用户请求页面时，服务器都会重新生成页面内容。

  • 使用场景：需要根据用户状态生成个性化内容（如登录后的页面、管理后台）

  • 技术支持：

    • Next.js Pages Router（旧版）使用 getServerSideProps() 实现

    • Next.js App Router（新版，推荐）中，默认的 page.tsx 文件就是 SSR，只要不加 'use client'，直接在组件中执行 fetch() 或数据库查询即可

    示例（App Router 中 SSR 页面）：

    // app/page.tsx
export default async function Home() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store', // 每次都重新请求
  });
  const data = await res.json();

  return <div>{JSON.stringify(data)}</div>;
}

2. SSG（Static Site Generation，静态站点生成）

SSG 是在项目构建阶段预先生成 HTML 页面，并在请求时直接返回这些静态页面，无需实时渲染。

  • 使用场景：博客、产品介绍页、营销页等内容不频繁变动的页面

  • 技术支持：

    • Next.js Pages Router 中使用 getStaticProps() 实现

    • App Router 中使用 fetch() 并配合 next: { revalidate: 秒数 } 实现增量静态生成（ISR）

    示例：

    export default async function Blog() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }, // 每 60 秒更新一次页面内容
  });
  const posts = await res.json();
  return <PostList data={posts} />;
}

3. CSR（Client-Side Rendering，客户端渲染）

CSR 是前端框架如 React、Vue 的默认模式，初始 HTML 仅包含一个空容器，所有内容由 JavaScript 在浏览器端动态生成。

  • 使用场景：后台管理系统、SPA（单页应用）、高交互页面

  • 技术支持：在 Next.js 中，标记组件为 'use client'，再使用 useEffect() 发起数据请求

    示例：

    'use client';
import { useEffect, useState } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);

  return <div>{JSON.stringify(data)}</div>;
}

二、它们对 SEO 有什么影响？

搜索引擎爬虫抓取网页时，优先读取 HTML 内容。HTML 中包含的文本、链接、meta 信息等都是 SEO 的重要依据。

SSR 和 SSG 的优势：

  • 直接返回完整 HTML 内容

  • 爬虫无需执行 JavaScript 就能获取页面内容

  • 更适合内容型网站，提高索引效率和排名

CSR 的劣势：

  • 初始 HTML 内容为空，仅包含 script 标签

  • 如果爬虫不执行 JavaScript（或执行能力有限），就无法获取真实内容

  • SEO 效果差，尤其是非 Google 搜索引擎

举例对比：

SSR/SSG 返回的 HTML：

<h1>产品名称</h1>
<p>这是一款超棒的产品！</p>

CSR 返回的 HTML：

<div id="app"></div>
<script src="bundle.js"></script>

三、扩展知识：如何优化 CSR 的 SEO？

虽然 CSR 天生不利于 SEO，但并非完全无法优化。以下是一些常见的解决方案：

1. 使用动态渲染（Dynamic Rendering）

对于爬虫请求，使用服务器返回预渲染的 HTML；对于用户请求，使用正常的 CSR。Google 官方推荐的解决方案之一。

2. 使用预渲染工具（如 prerender.io）

结合中间件或代理服务器，在部署时对页面进行预渲染，提高爬虫可读性。

3. SSR/SSG 与 CSR 混合使用（Next.js 提供支持）

同一个应用可以针对不同页面选择最合适的渲染方式，实现兼顾性能与 SEO 的目标。

四、总结对比表

特性

SSR

SSG

CSR

HTML生成时机

请求时服务器生成

构建时生成静态页面

浏览器运行时生成

SEO支持

✅ 极好

✅ 极好

❌ 较差

首屏速度

✅ 快

✅ 很快

❌ 慢（需要 JS 执行）

动态内容支持

✅ 强

❌ 弱

✅ 强

服务端负载

❌ 高

✅ 低（可用 CDN）

✅ 低

使用场景

登录后页面、内容动态页面

博客、文档、营销页

后台系统、SPA 应用

五、写在最后

在选择渲染模式时，没有绝对的优劣，只有是否适合你的业务。内容型网站优先考虑 SSR 或 SSG；后台系统、交互性强的应用选择 CSR 更合适。混合渲染（如 Next.js 提供的灵活方案）可以帮助开发者在性能和 SEO 之间找到平衡点。

希望这篇文章能帮你理清思路，选对渲染方式，让你的网站既快又能被搜索引擎喜欢！