How / when / why use getStaticProps

[Devalo]

Good day everyone,

I'm working on a website which fetches data from a headless CMS. Most of the website's
content is fetched from the CMS. I would like to call the website semi-dynamic.:

There is an article system which changes every time the client posts a new article.

• This component might change often.

There are some tabular board member data which changes from time to time.

• This component changes occasionally.

Static content should be pulled from the CMS as well,

• These components changes rarely.

If I'm using getStaticProps it only fetches on build time. Does that mean I have to set up a cron job or something else,
which restarts the server when the client is adding or editing content? This seems quite cumbersome.

According to the documentation, I can pass a revalidate to the return statement,
By using this, I am able to fetch freshly updated content from the CMS.

Is this the best way to achieve what I'm trying to do?
I could of course use getServerSideProps and be done with it, but it would be nice to reduce
the amount of external API fetching for better speed.

What are the best practices in situations like this?

[leerob]

Does that mean I have to set up a cron job or something else,
which restarts the server when the client is adding or editing content?

Nope! As you found out, using revalidate is the perfect solution for your problem. For example:

export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return {
    props: { post },
    // Re-generate the post at most once per second
    // if a request comes in
    revalidate: 1,
  }
}

You can change the revalidate value depending on how frequently your context needs updated. 1 second, 1 hour, 1 day, 1 week, etc.

Docs: https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

[Devalo]

Very cool. Thanks for your answer.
Whats the tech behind revalidate, if i may ask? I mean is it just server polling?

[leerob]

Inspired by stale-while-revalidate, background regeneration ensures traffic is served uninterruptedly, always from static storage, and the newly built page is pushed only after it's done generating.

https://web.dev/stale-while-revalidate/