🚀 What is Static Site Generation?

SSG pre-renders pages at build time, creating static HTML files that are served instantly. This approach delivers blazing-fast performance, excellent SEO, and reduced server costs, making it perfect for content that doesn't change frequently.


// Pages are generated once at build time
export default async function Page() {
  const data = await fetch('https://api.example.com/data')
  return <div>{data.title}</div>
}

SSG Benefits

Static Site Generation creates HTML at build time, serving pre-rendered pages instantly from a CDN. This eliminates server processing on each request, resulting in lightning-fast load times, better SEO rankings, and lower hosting costs for content-heavy sites.

⚡

Lightning Fast

Instant page loads from CDN

// Pre-built HTML
<html>...</html>

💰

Cost Effective

No server processing needed

// Static files only
.html, .css, .js

🔍

SEO Optimized

Fully rendered for crawlers

// Complete HTML ready
<h1>Page Title</h1>

🛡️

Secure

No server vulnerabilities

// Static files
No database exposed

🔹 Basic SSG Example

By default, Next.js generates static pages at build time:

// app/about/page.js
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a company dedicated to excellence.</p>
      <p>Founded in 2020, we serve customers worldwide.</p>
    </div>
  )
}

// This page is generated once at build time
// Served as static HTML to all users

Generated at build time:

About Us

We are a company dedicated to excellence.

Founded in 2020, we serve customers worldwide.

🔹 SSG with Data Fetching

Fetch data at build time to create static pages with dynamic content:

🔸 Blog Posts Example

// app/blog/page.js
async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function BlogPage() {
  const posts = await getPosts()
  
  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

// Data fetched once at build time

Static HTML with fetched data:

Blog Posts

Introduction to Next.js

Learn the basics of Next.js framework...

🔹 Dynamic Routes with SSG

Generate static pages for dynamic routes using generateStaticParams:

🔸 Individual Blog Posts

// app/blog/[slug]/page.js

// Tell Next.js which pages to generate
export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json())
  
  return posts.map(post => ({
    slug: post.slug,
  }))
}

// Generate page content
export default async function BlogPost({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
    .then(r => r.json())
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  )
}

// Generates: /blog/post-1, /blog/post-2, etc.

How it works:

generateStaticParams() returns list of slugs
Next.js generates a page for each slug
All pages are static HTML at build time

🔹 Forcing Static Generation

Explicitly mark routes as static with route segment config:

// app/products/page.js
export const dynamic = 'force-static'

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products')
  
  return (
    <div>
      <h1>Our Products</h1>
      {/* Product list */}
    </div>
  )
}

// This page will always be static

🔸 Other Static Options

// Cache fetch requests
const res = await fetch(url, {
  cache: 'force-cache' // Default behavior
})

// Or set revalidation time
const res = await fetch(url, {
  next: { revalidate: 3600 } // Revalidate after 1 hour
})

🔹 When to Use SSG

Choose SSG for the right use cases:

✅ Perfect for SSG:

Marketing pages: Landing pages, about, contact
Blog posts: Articles, documentation
Product catalogs: E-commerce product pages
Portfolio sites: Personal websites, galleries
Documentation: Guides, tutorials, API docs

❌ Not ideal for SSG:

Real-time data: Live scores, stock prices
User-specific: Dashboards, personalized content
Frequently updated: News feeds, social media
Large datasets: Millions of pages to generate

🔹 SSG Build Process

Understanding how Next.js generates static pages:

Build Steps:

Run build command: npm run build
Fetch data: All API calls are made
Generate HTML: Pages are rendered to HTML
Optimize assets: Images, CSS, JS are optimized
Output files: Static files ready to deploy

# Build your Next.js app
npm run build

# Output shows which pages are static
Route (app)                    Size
┌ ○ /                          1.2 kB
├ ○ /about                     890 B
├ ○ /blog                      1.5 kB
└ ○ /blog/[slug]               2.1 kB

○ (Static) automatically rendered as static HTML

🔹 SSG Performance Tips

Optimize your static site generation:

Limit static pages: Don't generate millions of pages
Use ISR: For semi-static content that updates
Optimize images: Use Next.js Image component
Code splitting: Automatic with Next.js
CDN deployment: Deploy to Vercel or similar

Static Site Generation (SSG)