SSG (Static Site Generation)

Completed

Generate static HTML pages at build time for optimal performance and SEO

Difficulty：Beginner

Est. Time：15 mins

Next.js

React

SEO

Performance

Core Features:

Build-time HTML Generation

Optimal Performance, CDN Cache

Perfect SEO

No Server Overhead

Back to React Experiments Back to Home

📄 SSG (Static Site Generation) Example

This page is generated at build time, with data from API calls during the build.

Server Component

Build-time Rendering

Static HTML

SEO Friendly

Build Time: 2026-03-19T06:53:35.183Z

Blog Post List

Next.js 15 New Features

Deep dive into the latest features and improvements of Next.js 15.

Next.js

React

Web Dev

Author: Zhang San | Published: 2025-01-15

TypeScript 5.0 Practical Guide

New features and best practices of TypeScript 5.0.

TypeScript

JavaScript

Author: Li Si | Published: 2025-01-10

React Server Components Explained

Understanding how React Server Components work.

React

SSR

Performance

Author: Wang Wu | Published: 2025-01-05

💡 SSG Core Features

Build-time Generation: When running npm run build, this page is already generated
Optimal Performance: Pure static HTML, cacheable by CDN, fastest loading speed
No Server Overhead: No runtime server processing needed, reducing costs
Perfect SEO: Search engines can directly crawl complete HTML content
Static Data: All users see the same content, suitable for infrequently changing data

🔧 How to Use

1. Create Server Component (default):

// app/blog/page.tsx
export default async function BlogPage() {
  // Use async/await directly in the component
  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json());

  return <div>{/* Render data */}</div>
}

2. Build the project:

npm run build  # Data fetching and static page generation occurs

3. View the result:

npm run start  # Start production server to view static pages

📚 Learning Resources

💡 Learning Suggestion:

After completing the experiment, view the page source (right-click → View Page Source) and compare the HTML content differences between SSG and CSR to understand how they work.