边缘静态站点生成
构建时预渲染页面并从边缘 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 以在退出前排空进行中的请求