深入理解 SSG：静态站点生成的原理、优势与实践

赵大仁

于 2025-05-05 16:58:27 发布

阅读量776

点赞数 26

分类专栏：前端技术 SSR 文章标签：前端

本文链接：https://blog.csdn.net/boyzhaotian/article/details/147719771

版权

技术同时被 3 个专栏收录

62 篇文章

订阅专栏

前端

21 篇文章

订阅专栏

SSR

2 篇文章

订阅专栏

深入理解 SSG：静态站点生成的原理、优势与实践

本文字数：486

静态站点生成（Static Site Generation，简称 SSG）是一种在构建阶段（build time）将网站内容预渲染为纯静态资源（HTML/CSS/JS）的技术路线。本文将带你全面了解 SSG 的工作原理、与其他渲染模式的对比、主流框架与工具以及落地最佳实践，并给出在 Next.js / Nuxt 等全栈框架中的实战示例，帮助你判断在项目中何时采用 SSG 能获得最优收益。

SSG 定义回顾

SSG（Static Site Generation）通常有两种使用语境：

语境	含义	典型代表
独立静态站点生成器	将 Markdown / MDX / 数据库内容一次性渲染为静态 HTML、CSS、JS 文件	Hugo、Jekyll、Hexo、Gatsby、Astro
全栈框架的预渲染模式	作为多渲染策略之一，在 build 时将页面预渲染为静态文件并上传至 CDN	Next.js `getStaticProps`、Nuxt `generate`、SvelteKit `adapter-static`

渲染模式对比

渲染模式	生成时机	部署形态	典型场景	优缺点
SSG	构建时一次性生成	纯静态托管 / CDN 边缘节点	内容改动不频繁的博客、文档、官网	速度快、运维成本低；实时性差，需要重新构建
SSR	请求时动态渲染	需要 Node 运行时	登录态个性化页面、SEO 友好需求	实时数据、SEO 佳；服务器压力大，TTFB 受网络波动
CSR	浏览器加载 JS 后渲染	纯前端静态资源	复杂交互型 SPA	交互流畅，状态保留；首屏慢、SEO 需额外处理
ISR	首次走 SSG，后台按策略增量再生	CDN + 待命回源	既要首屏快又要内容可更新的电商列表	兼顾速度与时效；实现复杂，需要缓存失效策略

主流 SSG 框架速览

工具 / 框架	语言	构建速度	生态 / 插件	特色亮点
Hugo	Go	极快（万级页秒级）	主题丰富	单二进制，零依赖
Jekyll	Ruby	中等	GitHub Pages 原生支持	入门门槛低
Hexo	Node.js	快	插件多，中文社区大	博客友好
Gatsby	React	偏慢（数据图谱）	GraphQL + 丰富插件	支持增量构建、PWA
Astro	多框架混用	快	现代、支持岛屿架构	0 JS 默认

TIP: 如果你已在使用 Next.js / Nuxt 等全栈框架，请优先使用它们自带的 SSG 能力来避免多栈维护。

适用场景与优势

内容变动频率低：技术博客、知识库、营销落地页
全球加速需求高：CDN 边缘直出 HTML，TTFB 极低
部署成本敏感：静态托管几乎零运维，域名 + CDN 即可
SEO 友好但不追求实时数据：Google/Bing 直接抓取 HTML，收录速度快

不适用场景

实时性要求高（如股票价格、社交动态）
需要严格登录鉴权或 AB 实验的页面

Next.js / Nuxt 中的 SSG 实战

Next.js

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchPostSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPostBySlug(params.slug);
  return { props: { post } };
}

构建时运行 getStaticProps，产出静态 HTML + JSON。
CDN 缓存，无需 Node Server。

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: { preset: 'static' },        // 3.x
  generate: { routes: ['/'] },        // 2.x
});

nuxi generate 一键输出静态文件夹 dist/。
直接推送至 Netlify / Vercel / GitHub Pages。

部署与持续集成建议

CI/CD：GitHub Actions 触发 npm run build && npm run export → 上传至对象存储 (OSS/S3)
CDN：开启 HTTP/2 & Brotli；配置缓存头 Cache-Control: public, max-age=31536000, immutable
增量更新：利用框架提供的 incremental build 或 ISR，降低全量构建耗时
监控：Lighthouse-CI & WebPageTest 持续监控 TTFB / LCP