Next.js: statically re-rendering components on Dynamic Routes into Full Route Cache on revalidation

293 Views Asked by At

On the one hand, Next.js has generateStaticParams which results in the corresponding pages statically rendered at build time and put into the Full Route Cache.

However, the docs say, and I've checked this behavior, that generateStaticParams doesn't get called on revalidation.

So my question is: is there a way to make pages on Dynamic Routes to be statically rendered and put into the Full Route Cache on revalidation?

I'm new to Next.js, so forgive me if the question is naive.

Details

Setup

app/posts/[id]/page.js:

export async function generateStaticParams() {
    const posts = await getPosts()

    return posts.data.map(post => ({id: post.id.toString()}))
}

// to see whether Full Route Cache was updated after revalidation
export const dynamicParams = false

export default async function Page({params}) {
    const post = await getPost(params.id)

    // JSX markup
}

app/revalidate/post/route.js:

export function GET() {
    revalidatePath('/posts/[id]')

    // ...
}

Steps

  1. Build the application

  2. Visit a post under, e.g., /posts/2

    The post page gets served

  3. Revalidate e.g.,

    curl http://localhost:3000/revalidate/post
  1. Visit a post under, e.g., /posts/2

    Now, a 404 page is served, which is the expected behavior if generateStaticParams wasn't called

0

There are 0 best solutions below