Skip to content
返回部署

边缘静态站点生成

构建时预渲染页面并从边缘 CDN 提供,实现最佳性能。

边缘入门

为什么

SSG 消除服务器计算 — 页面是预构建 HTML 从边缘提供,TTFB 低于 100ms。Cloudflare 边缘网络覆盖 330+ 城市,全球 p95 延迟低于 50ms。

边缘函数相比源服务器将 TTFB 降低 60-80%,Akamai 报告 2024 年 40% 的企业使用边缘计算。

何时使用

内容密集型站点(博客、文档、营销)且更新不频繁。 需要数据库写入的有状态逻辑避免边缘函数 — 边缘运行时无持久连接池。需要长时间运行任务(>30s)或重 CPU 计算时跳过。

如何做

# Next.js SSG with get静态Props export async function getStaticProps() { const posts = await fetchPosts(); return { props: { posts }, revalidate: 3600 }; } export async function getStaticPaths() { const posts = await fetchPosts(); return { paths: posts.map(p => ({ params: { slug: p.slug } })), fallback: 'blocking', }; } # 构建 and 部署 npm run build npx vercel deploy --prod 4. 验证部署 — curl -I https://your-app.example.com 5. 监控日志 — 前 5 分钟检查错误 6. 需要时回滚 — 回退到上一版本

示例

# Astro SSG with 边缘 output // Astro.配置.mjs export default { output: 'static', adapter: '@astrojs/vercel', build: { format: 'file' } };

常见问题

  • ⚠页面多导致构建超时 — 用增量静态生成
  • ⚠内容过期 — 设 revalidate 或内容变更时触发重建
  • ⚠环境间配置漂移 — 使用基础设施即代码(Terraform/Pulumi)保持 dev/staging/prod 一致

最佳实践

  • ✓半动态内容用 ISR — 兼具 SSG 和 SSR 优点
  • ✓CI 时预构建 — 保持部署步骤快速
  • ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求

常见问题解答