Can getStaticProps be used in a blog to update when a new post is posted?

Question

So I'm a little bit confused about getStaticProps.

getStaticProps runs at build time to generate static pages.

My question is that if I have a blog that updates when a new post is posted I shouldn't use getStaticProps, right? Because it is called only at build time and then never be called to fetch new available posts. In this case I should use getServerSideProps or fetch data client-side with useSWR, right?

Crackerjack

so how did you decide to use this answer? – Sewage

Answer 1

In Next.js, it's best to think of getStaticProps as a way to create static web pages. Not necessarily pages that are prebuilt during the initial build.

So if you use incremental static regeneration, you can use getStaticProps on the blog post pages.

What is "incremental static regeneration"?

Essentially, you use getStaticProps to tell Next.js to generate a static page (or set of pages) that may change over time. So you can have page with all your blog posts and tell Next.js that it may update every day.

// posts.js

export const getStaticProps = async () => {
  const blogPosts = await getAllBlogPosts()
  return {
    props: { blogPosts },
    revalidate: 60 * 60 * 24 // 1 day in seconds
  }
}

This way, Next.js will create a static version of the blog posts that expires after 1 day. So the next, day, it will regenerate a new static version of the page. That way, if you add a new blog post, it will show up the day it's published.

I'd recommend checking out the docs on this topic as it has a lot more detail: https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

What about individual blog posts?

Next.js can also let you add new blog post pages without having to rebuild the entire site. To do this, you need to create an individual blog post page with a dynamic route.

First, create a page in posts/[slug].js. This is a dynamic route where you can connect a slug to an individual blog post.

Then, add the getStaticPaths function. Make sure to set fallback to either true or blocking. The docs fleshes out the difference in more detail.

export const getStaticPaths = async () => {
  return {
    paths: []
    fallback: 'blocking'
  }
}

This tells Next.js that it can expect anything as a slug. That way, new blog posts can be added in the future without rebuilding the entire site.

Then, add your getStaticProps function to give the page it's details.

export const getStaticProps = async (context) => {
  const post = await getPostBySlug(context.params.slug)
  if(!post) return { redirect: '/posts', permanent: false } // redirect to main blog posts page if post doesn't exist, or any other page you want

  return {
    props: { post }
  }
}

Riplex

Btw, the question title includes getServerSideProps. – Heterograft

I found a great example of this on GitHub you can check out, GitHub: github.com/lfades/static-tweet , Site: static-tweet.vercel.app – Irremovable

Yes, good example with static data indeed. It does not relate to the OP's concern about a user updating his own blog post. But gives a good idea. – Sewage

Answer 2

With static generation, you pre-generate the page during build time. Data and pages are prepared when you build your application. Once you deploy your app, pages can be cached by the server, by the CDN, therfore incoming requests can be served instantly. Those pages that served are still hydrated by React app.

getStaticProps tells Next.js that we want to pre-generate this page. So you should be calling this async function only inside the pages and code that you write inside getStaticProps, will not be included in the code bundle that sent to the client. .next folder in your project holds the production ready code, so u can view the pregenerated html files inside server/pages

getStaticProps gets executed during build time but this is not the only time it gets executed. Incremental Static Generation means, you do not just generate your page statically once at build time, but that is continuously updated even after deployment without re-deploying it. You pregenerate the pages after "x" seconds and newly created pages will replace the old pages. So u can have ongoing prerendering on the server. For highly dynamic change where data changes all the time, you revalidate in short time intervals. But during development, your page will be pregenerated in every request, no matter what value you enter for revalidation.

getStaticProps should be used only with the data that is not changing frequently. For example, to fetch blog posts or fetch the public data.

Aretina