什么是 SSG
SSG（Static Site Generation，静态站点生成）与 SSR 的核心区别在于：SSG 在构建阶段一次性将所有页面渲染为 HTML 文件，无需在每次请求时进行服务端渲染。
| 特性 | SSG | SSR |
|---|---|---|
| 渲染时机 | 构建时 | 请求时 |
| 服务器压力 | 极低（纯静态文件） | 较高（每次请求都需渲染） |
| 动态内容 | 不支持 | 支持 |
| 响应速度 | 极快（CDN 直接返回） | 较快 |
| 适用场景 | 文档站、博客、展示页 | 动态应用、电商、社交 |
适用场景
- 文档站点（如 Vue.js 官网）
- 个人博客
- 营销落地页
- 作品集/Portfolio
- 不需要频繁更新的内容展示类网站
主流 SSG 方案对比
VitePress
VitePress 是 Vue 3 生态中官方推荐的文档站点生成器。
核心特点：
- 基于 Vite 和 Vue 3，构建速度极快
- 内置主题系统，支持自定义
- Markdown 中可直接使用 Vue 组件
- Vue.js 官方文档即由 VitePress 驱动
# 初始化 VitePress 项目
npx create-vitepress-site
# 开发模式
pnpm docs:dev
# 构建静态站点
pnpm docs:build
bash
适用场景：技术文档、API 文档、产品手册
VuePress
VitePress 的"亲兄弟"，同样是 Vue 生态的静态站点生成器。
核心特点：
- 基于 Webpack（VuePress 1.x）或 Vite（VuePress 2.x）
- 拥有成熟的插件系统
- 社区生态丰富
- 目前仍处于 Beta 阶段（2.x）
注意：VuePress 目前文档和生态尚不完善，生产环境建议优先考虑 VitePress。
Hexo
Hexo 是一个专注于博客领域的静态站点生成器，对前端开发者非常友好。
核心特点：
- 提供 444+ 个插件和丰富的主题
- 支持中文文档，上手简单
- 专注博客场景，开箱即用
- 主题灵活，配置丰富
# 安装 Hexo CLI
npm install -g hexo-cli
# 创建博客项目
hexo init my-blog
# 新建文章
hexo new "我的第一篇博客"
# 生成静态文件
hexo generate
# 本地预览
hexo server
bash
与其他方案的比较：
| 特性 | Hexo | Notion + 第三方工具 |
|---|---|---|
| 主题灵活度 | 高 | 低 |
| 配置丰富度 | 高 | 有限 |
| 中文支持 | 完整 | 依赖第三方 |
| 上手难度 | 低 | 极低 |
| 自定义能力 | 强 | 弱 |
Astro
Astro 是近年来崛起的现代化 SSG 框架，整体性能优秀，同时兼顾了 React 和 Vue 开发者。
核心特点：
- Content Focused：聚焦于内容，支持 CMS API 和纯 Markdown
- 框架无关：同时支持 Vue、React、Svelte 等
- Islands Architecture（岛屿架构）：默认零 JavaScript，按需水合
- 极快的页面加载速度
# 创建 Astro 项目
npm create astro@latest
# 添加 Vue 集成
npx astro add vue
# 添加 React 集成
npx astro add react
bash
应用场景覆盖：
| 场景 | 说明 |
|---|---|
| Blog | 博客系统 |
| Marketing | 市场展示页 |
| Agencies | 代理商网站 |
| E-commerce | 电商网站 |
| Portfolio | 个人作品集/播客 |
集成方式（以 Vue 为例）：
# 在 Astro 项目中添加 Vue 支持
npx astro add vue
bash
添加后在 .astro 文件中即可使用 Vue 组件：
---
import MyVueComponent from '../components/MyVueComponent.vue';
---
<MyVueComponent client:load />
astro
NPM 下载量趋势
前端 SSR/SSG 方案的受欢迎程度可以通过 NPM 下载量直观体现：
- Next.js -- 一骑绝尘，React 生态首选
- Gatsby -- 紧随其后，基于 React 的 SSG 方案
- Nuxt.js -- Vue 生态的 SSR/SSG 方案
- Astro -- 新星，快速崛起
- Express -- 通用 Web 框架
- VitePress -- Vue 文档站首选
- Hexo -- 老牌博客方案
方案选择建议
根据不同场景推荐以下方案：
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 技术文档站 | VitePress | Vue 官方出品，文档场景最佳实践 |
| 个人博客 | Hexo / Astro | 开箱即用，主题丰富 |
| 高定制化需求 | Next.js（React）/ Nuxt.js（Vue） | 生态成熟，性能优秀 |
| 多框架混用 | Astro | 框架无关，灵活度高 |
| 快速建站 | Hexo | 最低上手成本 |
核心建议：静态文档站考虑 VitePress；博客选 Hexo 或 Astro；高定制化需求选自己技术栈对应的 SSR 方案（React 选 Next.js，Vue 选 Nuxt.js）。
↑