名词（术语）了解 -- SSG

名词（术语）了解 – SSG

什么是静态站点生成(SSG)?

静态站点生成(Static Site Generation, SSG)是一种在构建时生成静态HTML网页的网站构建方法。与动态网站相比，SSG会提前将所有页面渲染成静态HTML文件，这些文件可以直接部署到CDN或web服务器上。

SSG 的工作原理

1.构建阶段

1.1 数据获取

// 示例：从不同数据源获取数据
async function fetchData() {// 从 CMS 获取数据const cmsData = await fetchFromCMS();// 从 Markdown 文件获取数据const mdContent = await fs.readFile('content.md', 'utf-8');// 从 API 获取数据const apiData = await fetch('api.example.com/data');return {cms: cmsData,markdown: mdContent,api: apiData};
}

1.2 模板处理

import React from 'react';
import { Layout } from '../components/Layout';interface PageProps {title: string;content: string;metadata: {author: string;date: string;};
}const PageTemplate: React.FC<PageProps> = ({ title, content, metadata }) => {return (<Layout><article className="post"><header><h1>{title}</h1><div className="metadata"><span>作者: {metadata.author}</span><span>发布日期: {metadata.date}</span></div></header><div className="content"dangerouslySetInnerHTML={{ __html: content }} /></article></Layout>);
};export default PageTemplate;

1.3 内容生成

// 示例：生成静态HTML文件
async function generateStaticFiles(data, template) {const pages = data.map(page => {const html = template(page);return {path: `${page.slug}.html`,content: html};});// 写入文件for (const page of pages) {await fs.writeFile(`dist/${page.path}`, page.content);}
}

2. 部署阶段

2.1 文件处理

// 示例：资源处理和优化
async function processAssets() {// 压缩 JavaScriptawait minifyJS('dist/js/*.js');// 优化图片await optimizeImages('dist/images/*');// 生成资源清单const manifest = await generateManifest('dist/**/*');// 添加文件哈希await addFileHashing('dist/**/*');
}

2.2 部署配置

# Nginx配置示例
server {listen 80;server_name example.com;root /var/www/html;# 缓存配置location /static/ {expires 1y;add_header Cache-Control "public, no-transform";}# 压缩配置gzip on;gzip_types text/plain text/css application/javascript;# 默认文档location / {try_files $uri $uri/ /index.html;}
}

3. 访问阶段

3.1 请求流程

在这里插入图片描述

3.2 页面渲染

import { GetStaticProps, GetStaticPaths } from 'next'// 定义页面组件
const BlogPost = ({ post }) => {return (<article><h1>{post.title}</h1><div>{post.content}</div></article>)
}// 生成静态路径
export const getStaticPaths: GetStaticPaths = async () => {// 假设从API获取所有博客文章const posts = await fetchPosts()const paths = posts.map((post) => ({params: { slug: post.slug },}))return {paths,fallback: false,}
}// 生成静态属性
export const getStaticProps: GetStaticProps = async ({ params }) => {// 获取特定文章的数据const post = await fetchPost(params.slug)return {props: {post,},// 可选：增量静态生成revalidate: 60, // 60秒后重新生成}
}export default BlogPost

SSG 工作流程的关键特点

预构建性
- 所有页面在构建时生成
- 减少运行时计算
- 提高页面加载速度
缓存优化
- 静态文件易于缓存
- CDN分发效率高
- 降低源服务器负载
资源优化
- 构建时进行资源压缩
- 自动化的资源处理
- 优化加载性能
部署简单
- 只需要静态文件服务器
- 容易实现高可用
- 维护成本低

最佳实践建议

增量构建
- 只构建发生变化的页面
- 减少构建时间
- 提高开发效率
资源优化
- 使用适当的缓存策略
- 实施资源压缩
- 优化图片和其他媒体文件
监控和分析
- 监控构建过程
- 分析页面性能
- 持续优化流程

SSG的优势

性能优化
- 更快的页面加载速度：因为页面是预先生成的静态HTML
- 更好的首屏渲染体验：无需等待JavaScript执行
- 降低服务器负载：不需要实时渲染
SEO友好
- 搜索引擎可以直接爬取完整的HTML内容
- 页面内容完整，更容易被搜索引擎索引
- 更好的网站排名机会
安全性
- 没有动态服务器，减少了攻击面
- 不涉及数据库查询，降低安全风险
- 静态文件不会执行服务器端代码
部署简单
- 可以部署到任何静态文件服务器
- 支持CDN缓存
- 降低托管成本

常用的SSG框架

Next.js
- React框架
- 支持混合渲染（SSG + SSR）
- 功能丰富，生态系统完善
Gatsby
- 基于React
- 强大的插件系统
- GraphQL数据层
Hugo
- Go语言开发
- 构建速度极快
- 适合构建博客和文档站点
Jekyll
- Ruby开发
- GitHub Pages默认支持
- 简单易用
VuePress
- Vue.js框架
- 专注于静态文档网站
- Markdown支持优秀

适用场景

SSG最适合以下类型的网站：

内容网站
- 博客
- 文档网站
- 营销页面
较少更新的网站
- 企业官网
- 产品展示页面
- 个人作品集
需要高性能的静态网站
- 高流量网站
- 需要CDN分发的网站

使用SSG的注意事项

构建时间
- 页面数量多时，构建时间可能较长
- 需要合理规划构建策略
动态内容处理
- 某些动态内容可能需要客户端JavaScript
- 可以配合API使用
更新策略
- 内容更新需要重新构建
- 可以使用增量构建优化
开发体验
- 需要熟悉相关框架
- 本地开发环境配置

实际应用示例

让我们看一个使用Next.js的SSG简单示例：

import { GetStaticProps, GetStaticPaths } from 'next'// 定义页面组件
const BlogPost = ({ post }) => {return (<article><h1>{post.title}</h1><div>{post.content}</div></article>)
}// 生成静态路径
export const getStaticPaths: GetStaticPaths = async () => {// 假设从API获取所有博客文章const posts = await fetchPosts()const paths = posts.map((post) => ({params: { slug: post.slug },}))return {paths,fallback: false,}
}// 生成静态属性
export const getStaticProps: GetStaticProps = async ({ params }) => {// 获取特定文章的数据const post = await fetchPost(params.slug)return {props: {post,},// 可选：增量静态生成revalidate: 60, // 60秒后重新生成}
}export default BlogPost