---

title: SSR vs CSR vs SSG: 深入理解服务器端渲染、客户端渲染与静态站点生成 date: 2023-10-05 description: 本课程将深入探讨服务器端渲染（SSR）、客户端渲染（CSR）与静态站点生成（SSG）的区别与应用场景，帮助开发者选择最适合的技术方案。 slug: ssr-vs-csr-vs-ssg tags:

• 前端开发
• 渲染技术
• 性能优化 category: 前端开发 keywords:
• SSR
• CSR
• SSG
• 服务器端渲染
• 客户端渲染
• 静态站点生成

---

SSR vs CSR vs SSG: 服务器端渲染 vs 客户端渲染 vs 静态站点生成

在现代Web开发中，选择合适的渲染方式对于应用的性能、SEO和用户体验至关重要。本文将详细介绍三种主要的渲染方式：服务器端渲染（SSR）、客户端渲染（CSR）和静态站点生成（SSG），并通过理论解释、代码示例和实践练习帮助你理解它们的区别和适用场景。

1. 服务器端渲染 (SSR)

1.1 理论解释

服务器端渲染（SSR）是指在服务器上生成完整的HTML页面，并将其发送到客户端。这种方式的优势在于：

• SEO友好：搜索引擎可以更容易地抓取和索引页面内容。
• 首屏加载速度快：用户可以更快地看到页面内容，因为HTML已经预先生成。

1.2 代码示例

以下是一个使用Next.js进行服务器端渲染的简单示例：

// pages/index.js
import React from 'react';

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>服务器端渲染示例</h1>
      <p>{data.message}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // 模拟从API获取数据
  const data = { message: '这是从服务器获取的数据' };
  return {
    props: { data },
  };
}

export default HomePage;

1.3 实践练习

1. 使用Next.js创建一个新的项目。
2. 在pages/index.js中实现上述代码。
3. 运行项目并观察页面加载速度和源代码。

2. 客户端渲染 (CSR)

2.1 理论解释

客户端渲染（CSR）是指在客户端（浏览器）上生成HTML页面。这种方式的优势在于：

• 动态内容：适用于需要频繁更新内容的应用，如单页应用（SPA）。
• 开发效率高：前端开发者可以专注于JavaScript和React组件的开发。

2.2 代码示例

以下是一个使用React进行客户端渲染的简单示例：

// src/App.js
import React, { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 模拟从API获取数据
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>客户端渲染示例</h1>
      {data ? <p>{data.message}</p> : <p>加载中...</p>}
    </div>
  );
};

export default App;

2.3 实践练习

1. 使用Create React App创建一个新的项目。
2. 在src/App.js中实现上述代码。
3. 运行项目并观察页面加载速度和源代码。

3. 静态站点生成 (SSG)

3.1 理论解释

静态站点生成（SSG）是指在构建时生成静态HTML文件，这些文件可以直接部署到服务器上。这种方式的优势在于：

• 性能最佳：静态文件加载速度快，适合内容不经常变化的网站。
• 安全性高：没有服务器端逻辑，减少了被攻击的风险。

3.2 代码示例

以下是一个使用Next.js进行静态站点生成的简单示例：

// pages/index.js
import React from 'react';

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>静态站点生成示例</h1>
      <p>{data.message}</p>
    </div>
  );
};

export async function getStaticProps() {
  // 模拟从API获取数据
  const data = { message: '这是在构建时生成的数据' };
  return {
    props: { data },
  };
}

export default HomePage;

3.3 实践练习

1. 使用Next.js创建一个新的项目。
2. 在pages/index.js中实现上述代码。
3. 运行next build和next export命令生成静态文件。
4. 将生成的静态文件部署到服务器上，并观察页面加载速度。

4. 总结与比较

| 渲染方式 | 优点 | 缺点 | 适用场景 | | --- | --- | --- | --- | | SSR | SEO友好、首屏加载快 | 服务器压力大、开发复杂 | 内容频繁更新、SEO重要 | | CSR | 动态内容、开发效率高 | SEO差、首屏加载慢 | 单页应用、内容频繁更新 | | SSG | 性能最佳、安全性高 | 内容不经常变化 | 博客、文档、静态网站 |

5. 实践练习

选择一个你感兴趣的项目（如博客、电商网站、社交媒体应用），根据项目需求选择合适的渲染方式，并实现相应的代码。

6. 进一步学习

• 深入学习Next.js，探索更多SSR和SSG的高级功能。
• 了解React的其他状态管理工具，如Redux、MobX等。
• 学习如何优化React应用的性能，如代码分割、懒加载等。

通过本教程，你应该对SSR、CSR和SSG有了更深入的理解，并能够根据项目需求选择合适的渲染方式。继续实践和学习，你将能够构建出高性能、SEO友好的Web应用。