SSG

Fetched via SSG Logic

Generated: Calculating...

Static Site Generation

With Next.js 16, everything is Dynamic by Default. We now use 'use cache' to explicitly pre-render this page at build time. This ensures you receive a pre-built HTML file from the CDN nearly instantly.

Environment

Vercel Serverless

Verification Lab

Time is frozen at Build Time. No matter how many times you refresh, this HTML is static.

Strategy

Static Opt-In: Using 'use cache', we manually restore the SSG behavior in the modern dynamic-first pipeline.

Hydration

Server sends finished HTML. Browser 'hydrates' it for interactivity.

Response Headers Lab

Response Headers

Cold start. No cache exists yet.

200 OK

Cache-Control:public, max-age=0, must-revalidate

X-Vercel-Cache:PRERENDER

Infrastructure Layer

X-Nextjs-Prerender:1

Infrastructure Layer

Age:0

Architectural Insights

Hover over headers to reveal
Infrastructure Lifecycle Data.

Time-Travel Simulator

Use the timeline buttons at the top to simulate how headers evolve over time in a production environment.

Standard:

Unified Explicit Caching (v16)

Infrastructure Verified

Static Generation Pipeline

Order of operations

Build Time

Next.js fetches data and generates HTML during "npm run build".

Static Asset

The page is saved as a physical .html file on the server.

Edge Deployment

Static files are pushed to the Global CDN Edge.

Instant Delivery

Users receive the pre-built file in milliseconds (0ms server logic).

Implementation Blueprint

app/page.tsx

// Default behavior (Static)
export default async function Page() {
  // Fetched ONCE during build-time
  const data = await fetch('https://api.com/data');
  
  return (
    <main>
      <h1>Static Content</h1>
      {data.map(item => <Card key={item.id} {...item} />)}
    </main>
  );
}

SSG is the gold standard for performance. Since the server does zero work at request time, the Time to First Byte (TTFB) is near-zero. Best for marketing pages and public blogs.

Live Demo

These products were fetched using Static Site Generation (SSG) at Build Time.

Testing Tip

Refreshing won't change the time. This HTML is a physical file on the server.

beauty

2.56 (99 reviews)

Essence Mascara Lash Princess

The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.

$9.99

beauty

2.86 (34 reviews)

Eyeshadow Palette with Mirror

The Eyeshadow Palette with Mirror offers a versatile range of eyeshadow shades for creating stunning eye looks. With a built-in mirror, it's convenient for on-the-go makeup application.

$19.99

beauty

4.64 (89 reviews)

Powder Canister

The Powder Canister is a finely milled setting powder designed to set makeup and control shine. With a lightweight and translucent formula, it provides a smooth and matte finish.

$14.99

beauty

4.36 (91 reviews)

Red Lipstick

The Red Lipstick is a classic and bold choice for adding a pop of color to your lips. With a creamy and pigmented formula, it provides a vibrant and long-lasting finish.

$12.99

beauty

4.32 (79 reviews)

Red Nail Polish

The Red Nail Polish offers a rich and glossy red hue for vibrant and polished nails. With a quick-drying formula, it provides a salon-quality finish at home.

$8.99

fragrances

4.37 (29 reviews)

Calvin Klein CK One

CK One by Calvin Klein is a classic unisex fragrance, known for its fresh and clean scent. It's a versatile fragrance suitable for everyday wear.

$49.99

fragrances

4.26 (58 reviews)

Chanel Coco Noir Eau De

Coco Noir by Chanel is an elegant and mysterious fragrance, featuring notes of grapefruit, rose, and sandalwood. Perfect for evening occasions.

$129.99

fragrances

3.8 (98 reviews)

Dior J'adore

J'adore by Dior is a luxurious and floral fragrance, known for its blend of ylang-ylang, rose, and jasmine. It embodies femininity and sophistication.

$89.99

1Normal Pages

Standard pages like /about or /contact are automatically generated as static HTML files during the build process if they don't use dynamic functions like cookies() or headers().

2Dynamic ID Pages

For dynamic routes like /blog/[id], use generateStaticParams. This tells Next.js which specific IDs to pre-render at build time, ensuring those pages load instantly like static ones.

The generateStaticParams Pattern (Dynamic SSG)

// src/app/blog/[id]/page.tsx
export async function generateStaticParams() {
  const posts = await fetch('https://api.com/posts').then(res => res.json());
 
  // Next.js will build ALL these pages at Build Time
  return posts.map((post) => ({
    id: post.id.toString(),
  }));
}

Production Build Artifact

next build -> serverless architecture ready

Architectural Shift

The SSG Evolution

Next.js 16 moves from guessing if a page is static to an Explicit Opt-in model.

Legacy Pattern

Implicitly Static

Next.js assumes static behavior by default. However, non-deterministic functions like new Date() will force the entire page to dynamic on every request.

// Traditional SSG (Pre-v16)

export default async function Page() {

// Next.js tries to guess...

const res = await fetch('...');

const buildTime = new Date(); ! Forces Dynamic

return <main>...</main>;

}

Unified v16

Explicitly Static

Using 'use cache' forces the compiler to snapshot the component. This freezes the result of dynamic functions into the static build.

// Modern SSG (Next.js 16)

export default async function Page() {

'use cache'; 🟢 Opt-In Success

const res = await fetch('...');

const buildTime = new Date(); ✓ Captured at build

return <main>...</main>;

}

When to deploy 'use cache'?

Scenario A

Build Snapshots: When you need a "Last Updated" timestamp on every page without triggering SSR.

Scenario B

Query Isolation: When a component performs a heavy DB query that only needs to run during build.

Scenario C

Static Islands: When using PPR to make specific parts of a dynamic route perfectly static.

Next Topic

Incremental Static Regeneration

Discover how to update static content without rebuilding your entire site.