Here's how this example works:

- During next build, all known blog posts are generated (there are 25 in this example)
- All requests made to these pages (e.g. /blog/1) are cached and instantaneous
- After 60 seconds has passed, the next request will still show the cached (stale) page
- The cache is invalidated and a new version of the page begins generating in the background
- Once generated successfully, Next.js will display and cache the updated page
- If /blog/26 is requested, Next.js will generate and cache this page on-demand

export async function generateStaticParams() { // PAGES ROUTER
  const posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: String(post.id),
  }))

'use server'
 
import { revalidatePath } from 'next/cache'
 
export async function createPost() {
  // Invalidate the /posts route in the cache
  revalidatePath('/posts')
}

<form action={createPost} ...