How does Astro's static site generation work?
Answer
Astro's static site generation (SSG) runs at build time: it executes all component scripts, fetches data, renders pages to HTML files, and outputs a dist/ directory of static assets. Build process: astro build. For dynamic routes (e.g., blog posts), export getStaticPaths(): export async function getStaticPaths() { const posts = await getCollection("blog"); return posts.map(p => ({ params: { slug: p.slug }, props: { post: p } })); }. This tells Astro which pages to generate. Benefits: Maximum performance: serve from CDN with no server needed. Security: no runtime server to attack. Low cost: static hosting is cheap or free. Astro optimizes assets at build time: images are converted to WebP/AVIF and resized, CSS is minified, JS is bundled only for hydrated islands. The build output is a pure HTML/CSS/JS directory deployable anywhere — GitHub Pages, Netlify, Vercel, S3.
Previous
What is progressive enhancement in Remix?
Next
What is Remix's defer and Suspense streaming?