Discussion on: Different ways to fetch data in Next.js (server-side) and when to use them

View post

Nice article. You could also say a word about using getStaticProps with Incremental Static Regeneration which allows you to use both statically generated content with dynamic updates when needed.

Here's what Next.JS documentation says about it:
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.

Example

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 1, // In seconds
  }
}

export default Blog

James Wallis • Mar 7 '21

Thanks for adding this! I’ve used it before and it’s pretty slick.