DISCLAIMER:
I'm very new to NextJS, so please don't hesitate to correct whatever I might say or might assume. It could be that my question doesn't make sense and reflects a misunderstanding of how NextJS works.

Description:
I’m working on a Next.js project where users can view pages for theater shows (e.g., /shows/[slug]). My goal is to have as many of those pages be static pages (to improve SEO), either for shows whose title or description or updated or for shows that have been added after the build.

What I've tried:
My code is very similar to the example given in docs for Incremental Static Regeneration (https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) which is why I'm including it below:

export const dynamicParams = true
 
export async function generateStaticParams() {
  const posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: String(post.id),
  }))
}
 
export default async function Page({ params }: { params: { id: string } }) {
  const post: Post = await fetch(
    `https://api.vercel.app/blog/${params.id}`
  ).then((res) => res.json())
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

From what I understand from the docs, by setting dynamicParams to true, every time someone will try to access a slug that hasn't been generated statically at build time, the page will be server-rendered and cached.

Question:
How does the server-rendered pages cache works ? Does it expire ? How does it compare to the pages that are statically rendered ?
If it's essentially better to have as many of your pages rendered statically, is there a way to server-render a page on the first visit and trigger a static build of that page so that next time, it's the static page that's being served to the user ?