Static Site Generation

How SSG Works

HTML is generated at build time and served from CDN.

SSG Process

1. Build time: Generate HTML for all pages
2. Deploy: Upload static files to CDN
3. Request: CDN serves pre-built HTML
4. Client: JavaScript hydrates HTML

Next.js SSG

// pages/products.js
export async function getStaticProps() {
  const products = await fetchProducts();
  
  return {
    props: { products },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Products</h1>
      <ProductList products={products} />
    </div>
  );
}

Dynamic Routes with SSG

// pages/products/[id].js
export async function getStaticPaths() {
  const products = await fetchAllProducts();
  
  return {
    paths: products.map(p => ({
      params: { id: p.id.toString() },
    })),
    fallback: false, // 404 for unknown paths
  };
}

export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  
  return {
    props: { product },
  };
}

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

Build Output

/
  index.html
  products.html
  products/1.html
  products/2.html
  products/3.html

Deployment

# Build
npm run build

# Export static files
npm run export

# Deploy to CDN
npx netlify deploy --prod --dir=out

SSG Benefits

1. Fastest performance: Pre-built HTML
2. Great SEO: Full HTML available
3. Easy scaling: CDN handles traffic
4. Low cost: No server needed

SSG Benefits

Performance Benefits

// Time to First Byte (TTFB)
// CSR: 200-500ms (server processing)
// SSR: 100-300ms (server rendering)
// SSG: 10-50ms (CDN response)

// First Contentful Paint (FCP)
// CSR: 1-3s (JavaScript execution)
// SSR: 0.5-1s (HTML + hydration)
// SSG: 0.1-0.3s (immediate HTML)

Caching Benefits

CDN Cache:
- Hit ratio: 95%+ for static sites
- Global distribution
- Instant response

Browser Cache:
- Immutable assets
- Long cache lifetime
- Offline support

Cost Benefits

Hosting	Monthly Cost
Node.js Server	$20-100+
Serverless Functions	$5-50
Static CDN	$0-20

Security Benefits

1. No server-side code: Nothing to hack
2. No database: No SQL injection
3. CDN protection: DDoS mitigation
4. Simple attack surface: Static files only

Developer Experience

# Local development
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Deploy
npm run deploy

Limitations

1. Build time: Pages generated at build
2. Not for real-time data: Content stale between builds
3. Large sites: Long build times
4. Dynamic content: Needs ISR or SSR

Dynamic SSG

Use Incremental Static Regeneration (ISR) for dynamic content.

ISR Basics

// Revalidate every 60 seconds
export async function getStaticProps() {
  const products = await fetchProducts();
  
  return {
    props: { products },
    revalidate: 60, // seconds
  };
}

On-Demand Revalidation

// pages/api/revalidate.js
export default async function handler(req, res) {
  const { secret, path } = req.body;
  
  if (secret !== process.env.REVALIDATION_SECRET) {
    return res.status(401).json({ message: 'Invalid token' });
  }
  
  await res.revalidate(path || '/products');
  return res.json({ revalidated: true });
}

Fallback Pages

// pages/products/[id].js
export async function getStaticPaths() {
  const products = await fetchPopularProducts();
  
  return {
    paths: products.map(p => ({
      params: { id: p.id.toString() },
    })),
    fallback: 'blocking', // SSR for unknown paths
  };
}

export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  
  if (!product) {
    return { notFound: true };
  }
  
  return {
    props: { product },
    revalidate: 3600,
  };
}

ISR Strategies

// Time-based revalidation
revalidate: 60 // Every minute
revalidate: 3600 // Every hour
revalidate: 86400 // Every day

// On-demand revalidation
// Trigger via API when content changes

// Tag-based revalidation (Next.js 13+)
export async function getStaticProps() {
  const products = await fetchProducts();
  
  return {
    props: { products },
    tags: ['products'],
  };
}

// Revalidate by tag
await res.revalidate('/products', { tags: ['products'] });

ISR vs SSR

Aspect	ISR	SSR
Performance	CDN speed	Server speed
Freshness	Configurable	Always fresh
Cost	Low	Higher
Complexity	Simpler	More complex