SSG (Static Site Generation)静态预渲染生成模式

静态网站生成 (SSG) 实验演示

所有页面在项目构建 (npm run build) 时提前烘焙固化为纯静态 HTML，由全球 CDN 边缘节点极速分发。

← 返回对比看板

📦 SSG 编译固化特征诊断（对比 SSR 与 CSR）

静态文件烘焙构建时刻 (Build Timestamp):

2026-11-02 01:06:04

⚠️ 请随意刷新页面：无论请求多少次，此时间戳保持不变（编译期已固化）！

运行时服务器资源开销:

0% CPU / 0% DB 查询

直接由 Cloudflare Edge 静态缓存命中（HIT）

安全与稳定性评级:

最高级 (A+)

无服务端后端进程崩溃风险，天然免疫 SQL 注入

🔍 编译产物剖析：SSG 的构建产物与发布模式

在执行 next build 后，框架会直接生成物理磁盘文件：

dist / out /
├── ssg.html         <- 包含完整预编译 DOM 与样式的纯静态 HTML 文件
├── ssg.json         <- 构建期抽取的预加载数据清单 (Props Payload)
└── static/chunks/   <- 负责后续客户端轻量交互的静态 JS 脚本

静态预生成文章列表 (Pre-rendered at Build Time)

✓ 毫秒级 CDN 瞬间吐出

SSG 静态编译6 min · 来源: Build Compiler

静态站点生成 (SSG) 构建优化：从构建预渲染到全局 CDN 极致缓存

在构建阶段 (Build Time) 一次性将 React 组件预渲染为纯静态 HTML 物理文件并推送至全球 CDN 节点。

CDN Caching4 min · 来源: Edge Cache Proxy

极致性能：为什么 SSG 拥有所有渲染模式中最低的 TTFB (首字节时间)

请求到来时服务器无需执行任何 JavaScript 脚本或数据库查询，直接通过 CDN 边缘静态返回，时延低至数毫秒。

Architecture8 min · 来源: System Architect

从 SSG 到 ISR (增量静态再生成)：静态网站的数据动态演进策略

兼顾 SSG 的极低成本与高并发能力，通过设置 revalidate 周期在后台异步更新过期静态缓存。

💡 实验原理解析：SSG 的优势与局限

优势： 极致的访问速度与并发抗压能力；全球 CDN 边缘节点直接响应，成本接近于零；兼具完美的 SEO。
局限： 数据无法实时更新；当内容更新时，必须重新触发流水线构建或结合 ISR 策略更新；当页面数量极其庞大（例如数十万页面）时构建耗时较长。
适用场景： 内容变动频率低、强依赖 SEO、追求极速访问的场景（如产品文档、企业官网、营销博客、学术报告页面）。