SSG (Static Site Generation)
Pre-generate all pages at build time for the fastest loading speed and optimal SEO performance. This page was generated at build time on 03/24/2026, 07:31:17 AM.
How SSG Works
Build Time Generation
During npm run build or npm run generate, Nuxt pre-renders all pages as static HTML files
CDN Distribution
Static files can be deployed to any CDN or static hosting service like Netlify, Vercel, GitHub Pages
Lightning Fast Loading
Users get pre-generated HTML directly, no server rendering needed, extremely fast loading
SSG Overview
A visual guide to how Nuxt SSG organizes your project — from file structure to final build output.
Page Structure
Nuxt uses a file-based routing convention. Place .vue files in the pages/ directory, and routes are automatically generated — no manual configuration needed.
SSG Indicator
When SSG is enabled, pages are pre-rendered as static HTML at build time. The indicator confirms Static Site Generation is active for the route.
Routing Example
File paths map directly to URLs: pages/index.vue → /, pages/about.vue → /about, and dynamic routes like pages/blog/[slug].vue.
Build Output
Running nuxi generate produces pre-rendered HTML files for every route, ready to deploy to any static hosting or CDN.
Performance Metrics
Loading Time Comparison
SSG Advantages
First load time typically < 100ms
Complete HTML content, easily indexed by search engines
No server needed, can deploy to free CDN
Static files, no server security risks
Use Cases
Documentation Sites
Technical docs, API documentation, user manuals with relatively fixed content
Corporate Websites
Company introduction, product showcase, contact information and marketing sites
Personal Blogs
Low-frequency publishing, infrequent content updates for personal websites
Configuration Example
// nuxt.config.ts
export default defineNuxtConfig({
// Global SSG configuration
nitro: {
prerender: {
routes: ['/ssg', '/about', '/contact']
}
},
// Route-level configuration
routeRules: {
'/ssg': { prerender: true },
'/blog/**': { prerender: true }
}
})