Static Site Generation (SSG)

Static Site Generation (SSG) is Next.js's default and most performant rendering strategy. Instead of processing data on every single request (like SSR), SSG builds the HTML for a page at build time. The resulting HTML is then cached onto a CDN.

When a user requests the site, the CDN instantly serves the cached HTML. This ensures blazing fast load speeds and massive cost savings for high-traffic sites.

SSG in the App Router (Next 13+)

In the App Router, data fetching via standard fetch() is automatically cached by default. If you fetch data without specifying cache removal, Next.js generates the static page statically upon build.

// app/blog/page.js
async function getPosts() {
  // This fetch is cached and resolved at BUILD TIME automatically!
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();
  return <div>{/* Render logic */}</div>;
}

Incremental Static Regeneration (ISR)

If your data changes (say, someone posts a new article), re-running the entire Next.js build is impractical.Incremental Static Regeneration (ISR) solves this. It allows Next.js to regenerate single static pages behind the scenes on a timer, without rebuilding the whole site.

In the App Router, you can set a revalidation timeframe on the `fetch` options:

// Revalidate the cache and regenerate the static page every 60 seconds
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 }
});

SSG in the Pages Router (`getStaticProps`)

If using the classic Pages Router, you export an async function named getStaticProps. This function runs at build time and passes the returned props to the page.

// pages/blog.js
export default function Blog({ posts }) {
  return (/* render posts */);
}

// Runs at NEXT BUILD, entirely on the server
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 60 // Optional: Turns SSG into ISR, rebuilding page max once a minute
  };
}

Generating Dynamic Static Pages (`getStaticPaths`)

What if you want to statically generate dynamic routes, such as /blog/[id]? Next.js needs to know all the possible `[id]` values at build time so it can build an HTML file for each one. You achieve this in the Pages Router via getStaticPaths.

// pages/blog/[id].js
export async function getStaticPaths() {
  // 1. Fetch all possible IDs from database
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  // 2. Map them into the paths array format required
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  // 3. Render only these paths at build time
  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  // Params contains the id provided by getStaticPaths
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

In the App Router, this equivalent function is called generateStaticParams().

Summary: When to use what?

• SSG / ISR: Use for Blogs, E-Commerce Listings, Marketing pages, and documentation. Data that updates periodically or is the same for all users.
• SSR: Use for user dashboards, checkout flows, completely dynamic views, and real-time data where you cannot tolerate stale cache results.