Lab Projects
PythonReact/Next.jsBlogAbout

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 ExperimentsBack 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: 2025-12-10T14:24:23.395Z
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.