Theo's Typesafe Cult•3mo ago

NextJS Server Cache?

Noticed some odd behaviour in my NextJS app where I have a simple table which uses data fetched via server action. I updated the data in my database, but the table still had the old data. I cleared storage, but the table still had the old data. Then I redeployed NextJS, and the new data was now visible. What's could the cause be & how can I fix it?

6 Replies

Mike•3mo ago

Hey! I'm new to Next as well, but this does potentially sound like caching.

"By default, Next.js will cache as much as possible to improve performance and reduce cost. This means routes are statically rendered and data requests are cached unless you opt out."

https://nextjs.org/docs/app/building-your-application/caching

Building Your Application: Caching | Next.js

An overview of caching mechanisms in Next.js.

wenish•3mo ago

@Mike

export async function getStaticProps(context: { params: { name: string } }) {
    const name = context.params.name
    const data = await db.symptom.findUnique()

    if (!symptom) {
        return {
            notFound: true
        }
    }

    return {
        props: {
            preFetchedData: data
        },
        revalidate: 60
    }
}

export async function getStaticProps(context: { params: { name: string } }) {
    const name = context.params.name
    const data = await db.symptom.findUnique()

    if (!symptom) {
        return {
            notFound: true
        }
    }

    return {
        props: {
            preFetchedData: data
        },
        revalidate: 60
    }
}

do you know how exactly this revalidate works? if read in the docs this would cache the page for 60 seconds and then on the next request it would render it new. but it seems this return alone isnt enough. can you put me into the right direction what else the server needs? Im hosting the site on vercel default config

Mike•3mo ago

@Wenish I just looked through the docs, and it looks like that second return should be working correctly for Incremental Static Regeneration (ISR). https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration I'm wondering 2 things: 1. Is symptom set to false when you build your application? 2. Is your data changing within that 60s? If the data doesn't change,

Data Fetching: Incremental Static Regeneration (ISR) | Next.js

Learn how to create or update static pages at runtime with Incremental Static Regeneration.

Mike•3mo ago

You might want to add revalidate: 60 to your first return, but I'm not 100% sure about this.

wenish•3mo ago

good question. the data did not change. the template did. symptoms are true or better said. they are objects. we have a lot of db entries while its building. (if it would be false. it would render the not found page which it dosnt) so maybe thats the problem.... but obviously if i update the page template (react component) and build and deploy the new version i want the users to see the new version and not an old page 😄

Mike•3mo ago

@Wenish maybe try changing the data to see if that triggers a refetch? I'm not sure if a template change will trigger a data refetch or not 🤔 😅

Gaming

Programming

NextJS Server Cache?