When will you use this?

Use when your React app must talk to a real backend or show live updates.

• React frontends talk to .NET, Node, or Java APIs — fetch and auth are daily tasks.
• Live chat and stock tickers use WebSockets or SignalR with React state.

Real-world: pre-built help docs

Zoho help center builds 500 doc pages at deploy time — CDN serves static HTML globally in milliseconds.

Production-style code

// next build generates HTML for each path
export async function generateStaticParams() {
  const docs = await getAllDocSlugs();
  return docs.map(slug => ({ slug }));
}

export default function DocPage({ params }) {
  const doc = getDoc(params.slug); // available at build time
  return <article><h1>{doc.title}</h1>{doc.body}</article>;
}

What happens in production: SSG is cheapest and fastest for content that changes only on deploy — docs, blogs, marketing.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// Next.js — static by default for pages without dynamic data
export default function DocsPage() {
  return <article>Documentation content</article>;
}

// Or generate paths at build:
export async function generateStaticParams() {
  return [{ slug: 'intro' }, { slug: 'setup' }];
}

Line-by-line walkthrough

How it works (big picture)

• npm run build creates HTML files.
• Deploy to any static host.
• No server needed for each page view.

Do this on your computer

1. Identify pages with no user-specific data.
2. Use generateStaticParams for dynamic routes.
3. Deploy dist or .next static export.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

SSG = HTML at build time. Fast and cheap on CDN. For content that is same for all users.

Common questions