Static Site Generation at the Edge
Pre-render pages at build time and serve from edge CDN for maximum performance.
EdgeBeginner
Why
SSG eliminates server compute — pages are pre-built HTML served from edge, achieving sub-100ms TTFB. Cloudflare's edge network spans 330+ cities with sub-50ms p95 latency globally.
Edge functions reduce TTFB by 60-80% compared to origin servers, and Akamai reports 40% of enterprises now use edge compute in 2024.
When
Content-heavy sites (blogs, docs, marketing) that update infrequently. Avoid edge functions for stateful logic requiring database writes — edge runtimes have no persistent connection pool.
Skip if you need long-running tasks (>30s) or heavy CPU computation.
How
# Next.js SSG with getStaticProps
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',
};
}
# Build and deploy
npm run build
npx vercel deploy --prod
4. Verify deployment — curl -I https://your-app.example.com
5. Monitor logs — check for errors in first 5 minutes
6. Rollback if needed — revert to previous version
Example
# Astro SSG with edge output
// astro.config.mjs
export default {
output: 'static',
adapter: '@astrojs/vercel',
build: { format: 'file' }
};
Common Problems
- ⚠Build timeout with many pages — use incremental static generation
- ⚠Stale content — set revalidate or trigger rebuild on content change
- ⚠Configuration drift between environments — use infrastructure-as-code (Terraform/Pulumi) to keep dev/staging/prod identical
Best Practices
- ✓Use ISR for semi-dynamic content — best of SSG and SSR
- ✓Pre-build at CI time — keep deploy step fast
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit