The In-Between States

Edit Post

Title

Description

ContentMarkdown supported

# 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:

```tsx
// 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:

```tsx
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:

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

The combination ensures:
1. The posts list cache invalidates
2. The specific post's cache invalidates
3. 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.

Published

Cancel