What is SSG in Next JS?

Next.jsMiddle~1 min read

SSG (Static Site Generation) in Next.js is a rendering method where HTML pages are generated ahead of time, at build time, and served to users as ready-made static files.

How SSG works

You run next build
Next.js renders the page once
The ready HTML is saved
On request:

there is no server
the file is served instantly (often through a CDN)

build time → HTML → CDN → user

When SSG is used

SSG is used when:

data does not depend on the user
content rarely changes
speed and SEO matter

Typical cases:

landing pages
documentation
a blog
reference pages
public roadmaps

SSG example in the App Router

// app/blog/page.tsx
export const dynamic = "force-static";

export default async function Page() {
  const posts = await getPosts(); // runs at build time
  return <PostsList posts={posts} />;
}

Or through fetch:

await fetch("https://api.example.com/posts", {
  cache: "force-cache", // default → SSG
});

Pros of SSG

maximum speed
excellent SEO
minimal server load
cheap hosting
ideal for a CDN

Cons of SSG

data does not update without a rebuild
content cannot be personalized
not suited for auth / user data

SSG vs SSR

	SSG	SSR
When it renders	build time	request time
Speed	Very high	High
SEO	Excellent	Excellent
Freshness	No	Yes
Server	not needed	needed

SSG is not just "pure static"

In Next.js, SSG easily extends into ISR:

export const revalidate = 60;

The page:

stays static
updates in the background once every 60 seconds

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What is SSG in Next JS?

#How SSG works

#When SSG is used

#SSG example in the App Router

#Pros of SSG

#Cons of SSG

#SSG vs SSR

#SSG is not just "pure static"