Combine dynamic route and static rendering

As you can see our users pages are dynamic(will render at request time). how we can make it static?

generateStaticParams()

The generateStaticParams function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time.

     

add this to /app/users/[userId]/page:

// Return a list of `params` to populate the [userId] dynamic segment
export async function generateStaticParams() {
  const users = await getUsers()

  return users.map((user) => ({
    userId: String(user.id)
  }))
}

💡 for more information about generateStaticParams visit this link.

     

💻 Click here to watch state of project.