SSG (静态站点生成)

已完成

在构建时生成 HTML 的静态页面，性能最佳，SEO 友好

难度：初级

预计时间：15分钟

Next.js

React

SEO

性能

核心特性：

构建时生成 HTML

性能最佳，CDN 缓存

SEO 完美

无服务器开销

返回 React 实验列表返回首页

📄 SSG (Static Site Generation) 示例

这个页面在构建时生成，数据来自构建时的 API 调用。

服务器组件

构建时渲染

静态 HTML

SEO 友好

构建时间: 2025-10-31T12:25:34.895Z

博客文章列表

Next.js 15 新特性解析

深入了解 Next.js 15 的最新功能和改进。

Next.js

React

Web开发

作者: Zhang San | 发布日期: 2025-01-15

TypeScript 5.0 实战指南

TypeScript 5.0 的新特性和最佳实践。

TypeScript

JavaScript

作者: Li Si | 发布日期: 2025-01-10

React Server Components 详解

理解 React Server Components 的工作原理。

React

SSR

性能优化

作者: Wang Wu | 发布日期: 2025-01-05

💡 SSG 核心特点

构建时生成: 运行 npm run build 时，这个页面就已经生成好了
性能最优: 纯静态 HTML，可以被 CDN 缓存，加载速度最快
无服务器开销: 不需要服务器运行时处理，降低成本
SEO 完美: 搜索引擎可以直接抓取完整的 HTML 内容
数据固定: 所有用户看到相同内容，适合不常变化的数据

🔧 如何使用

1. 创建服务器组件（默认）：

// app/blog/page.tsx
export default async function BlogPage() {
  // 直接在组件中使用 async/await
  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json());

  return <div>{/* 渲染数据 */}</div>
}

2. 构建项目：

npm run build  # 此时会执行数据获取并生成静态页面

3. 查看结果：

npm run start  # 启动生产服务器查看静态页面

📚 相关学习资源

💡 学习建议：

完成实验后，建议查看页面源代码（右键 → 查看页面源代码），对比 SSG 和 CSR 在 HTML 内容上的差异，理解它们的工作原理。