The Power of Static Site Generation

I love some of the Next.js features, and here's why:

In the world of Next.js, Static Site Generation (SSG) stands out as the ultimate way to achieve blazing fast performance and impeccable SEO. While SSR is great for real-time data, SSG allows you to pre-render your entire site at build time.

What is SSG?

Static Site Generation is the process of generating HTML pages at build time. Unlike SSR, which renders pages on every request, SSG creates static files that can be served instantly from a Content Delivery Network (CDN).

Why choose SSG?

Unmatched Speed: Since the HTML is already generated, the server just needs to send the file. No database queries or complex rendering at request time.
Enhanced Security: There is no server-side code running for the request, significantly reducing the attack surface.
Cost Effective: Serving static files is much cheaper and scales almost infinitely with a CDN.

The Role of `generateStaticParams`

Next.js makes SSG incredibly easy for dynamic routes using the generateStaticParams function. This function enables you to define exactly which dynamic paths should be pre-rendered.

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

By returning an array of slug objects, Next.js generates a static HTML file for every single post in your list during the build process.

On-Demand Revalidation with `revalidatePath`

Another powerful feature of Next.js is the ability to update static content without rebuilding the entire site. This is known as On-Demand Incremental Static Regeneration (ISR).

When you update a post in your database, you can use revalidatePath in a Server Action or Route Handler to purge the cache for that specific page.

import { revalidatePath } from 'next/cache';

export async function updatePost(id: string, data: any) {
  await db.post.update({ where: { id }, data });
  
  // Revalidate the specific blog post page
  revalidatePath(\`/blog/\${data.slug}\`);
  // Also revalidate the blog list
  revalidatePath('/blog');
}

This ensures your users always see the latest content while still benefiting from the speed of static delivery.

When to use SSG?

SSG is perfect for content that doesn't change on every request. Blogs, photo galleries, or 'about me' pages are all ideal candidates for Static Site Generation.

Build-time Process

Here is an example of the output when this specific site is being processed during the build phase. You can see how Next.js identifies the static and SSG routes:

✓ Generating static pages using 5 workers (15/15) in 438.9ms
✓ Finalizing page optimization in 18.3ms

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ○ /blog
├ ● /blog/[slug]
│ └ /blog/power-of-ssg
└ ● /series/[seriesUrl]
  ├ /series/home
  ├ /series/oman
  ├ /series/turkey
  └ [+5 more paths]

○  (Static)  prerendered as static content
●  (SSG)     prerendered as static HTML (uses generateStaticParams)

In my own admin environment, I use revalidatePath every time I save a new photo or blog post, ensuring the public site is always up to date without any manual intervention.