generateStaticParams

The ultimate in-between state optimization is eliminating it entirely. Pre-rendered pages load instantly because there's nothing to wait for—the HTML is ready before the user even clicks.

generateStaticParams tells Next.js which dynamic route segments to pre-render at build time.

Basic Usage

Return an array of params objects for each page to pre-render:

// app/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPublishedPosts();
  
  return posts.map(post => ({
    slug: post.slug,
  }));
}

export default async function PostPage({ params }) {
  const { slug } = await params;
  const post = await getPublishedPostBySlug(slug);
  
  return <article>{post.content}</article>;
}

// app/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPublishedPosts();
  
  return posts.map(post => ({
    slug: post.slug,
  }));
}

export default async function PostPage({ params }) {
  const { slug } = await params;
  const post = await getPublishedPostBySlug(slug);
  
  return <article>{post.content}</article>;
}

At build time, Next.js generates HTML for each returned slug. When users navigate to these pages, content appears instantly.

Dynamic Metadata

Generate SEO metadata for each page:

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPublishedPostBySlug(slug);

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
    },
  };
}

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPublishedPostBySlug(slug);

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
    },
  };
}

The generateMetadata function runs at build time for static pages, embedding the correct title and description in the HTML.

New Content On-Demand

What about new posts created after build? Next.js handles this automatically—new slugs are generated on-demand when first requested, then cached.

To ensure pre-rendered pages update when content changes:

// In your Server Function after creating/updating a post
revalidateTag('posts', 'max');
revalidateTag(`post-${slug}`, 'max');
refresh();

// In your Server Function after creating/updating a post
revalidateTag('posts', 'max');
revalidateTag(`post-${slug}`, 'max');
refresh();

The combination ensures:

The posts list cache invalidates
The specific post's cache invalidates
The current user sees the update immediately

Best for Read-Heavy Content

Pre-render pages that are:

Read frequently (blog posts, documentation, product pages)
Updated occasionally (not real-time data)
SEO-important (need metadata in HTML)

Pages that read searchParams or need user-specific data should remain dynamic.