I'm basically developing a blog on Next.js. Because it is another team which is in charge of the back-end, I'm currently making fetch API calls from getStaticProps to get my articles even though it's better practice to make database queries directly:

export async function getStaticProps({ params, res }) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}

While this works perfectly in development mode, getting the article, editing it, and then accessing it again does not work in production (even locally, with the built version).

I guess it has something to do with Next.js handling cache somehow... What am I doing wrong? Thank you!

I'm basically developing a blog on Next.js. Because it is another team which is in charge of the back-end, I'm currently making fetch API calls from getStaticProps to get my articles even though it's better practice to make database queries directly:

export async function getStaticProps({ params, res }) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}

While this works perfectly in development mode, getting the article, editing it, and then accessing it again does not work in production (even locally, with the built version).

I guess it has something to do with Next.js handling cache somehow... What am I doing wrong? Thank you!

• javascript
• reactjs
• next.js

3 Answers 3

First of all the argument of function getStaticProps i.e the context object doesn't have any property named res. So res.statusCode = 404; doesn't do anything here.

And getStaticProps is meant be used for static site generation, additionally for dynamic routes, you can export another function getStaticPaths which should generate and return an array of paths with the dynamic route params for which getStaticProps will be called at build time for pre-rendering the pages.

In development mode, data-fetching methods will be called per-request basis so your code works. But in production mode, it will show the pre-rendered static pages which means the page will show the content as it was rendered and if you edit and update the content it will not reflect on the pages.

If you decide to go with static-site-generation either you have to rebuild the entire site after an update to a blog or you have to have some kind of client-side data-fetching logic that will update the blog when you update its content.

For client-side data-fetching you can use something like swr or react-query

Here is some psuedo-code which might help with pre-rendering the pages,

for route /article/[articleId]

export async function getStaticPaths() {
  const articles = await /* db query to get the list of articles or fetch from remote API*/

  // generate a list of paths with route params
  const paths = articles.map(article => ({ params: { articleId: article.id }}))

  return {
     paths,
     fallback: false 
     // fallback can be  true if you want to show a fallback version of page 
     // and serve JSON for unknown articles
  }

}


export async function getStaticProps(ctx) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
        };
    } catch (error) {
        return {
          props: null
        }
    }
}

Learn more about how fallback works in returned value of function getStaticPaths docs.

Another alternative is to use getServerSideProps as the data-fetching method which will be called on each request for the page, but TTFB(time to first byte) will be higher. So for a blog-post site, I will not suggest using getServerSideProps.

You have to add the revalidate parameter. Find out more here.

In your case

export async function getStaticProps({ params, res }) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
            revalidate: 10 // 10 seconds 
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}

Please note that revalidate parameter.

There is a way to update the HTML that is generated using getStaticProps, this process is called incremental server regeneration. This will ensure that your page is updated whenever you push an update to your blog post. NextJS has documented this https://nextjs.org/docs/basic-features/data-fetching You search for ISR on the above page to understand how it's done Basically you'll have to specify a time after which NextJS will try to update the page and in case there is a new post altogether, it will be server rendered on first request and then cached, once cached it'll work almost like a static page, refer fallback: 'blocking' Quoting from website : Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.

Consider our previous getStaticProps example, but now with Incremental Static Regeneration enabled through the revalidate property