Data Fetching without fetch()

[last drum]

So i have a mongodb connection that displays data. On my local server (localhost) it updates the data when I reload the page.

When i deploy (to vercel) the data updates as it is deployed. But when data is added, it isn't updated after the initial deployment update

[inner meteor]

Hi @last drum. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It seems like you're using static generation (SSG) for your data fetching, which means the data is fetched at build time and doesn't update on each request. When deploying to Vercel, the data is fetched during the build process and remains static until the next deployment.

To have your data update more frequently, you can use Incremental Static Regeneration (ISR). With ISR, you can set a revalidation interval, and the data will be updated at most every specified interval when it receives a request.

Here's a note from the Vercel Guide (https://vercel.com/guides/nextjs-prisma-postgres):

Once the app is deployed to production, the feed will be updated at most every 10 seconds when it receives a request. That's because you're using static site generation (SSG) via getStaticProps to retrieve the data for this view with Incremental Static Regeneration (https://vercel.com/docs/basic-features/data-fetching/incremental-static-regeneration). If you want data to be updated "immediately", consider using On-Demand Incremental Static Regeneration (https://vercel.com/docs/concepts/incremental-static-regeneration/quickstart).

To implement ISR, you can add a revalidate property to the return object of your getStaticProps function:

export async function getStaticProps() {
  // Fetch data from MongoDB
  // ...

  return {
    props: {
      // Your data
    },
    revalidate: 10, // Revalidate every 10 seconds
  };
}

This will ensure that your data is updated more frequently when deployed to Vercel.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@last drum kapa.ai is still learning and improving, please let us how it did by reacting below

[last drum]

i am using app dir where would i put the revalidate

@inner meteor but i am using app dir where would i put the revalidate

[inner meteor]

Let me check the knowledge base for you again. One moment! :books:

---

In the app directory, you can use the revalidate option with fetch() to set the cache lifetime of a resource (in seconds). Here's an example from the Next.js 13 Upgrade Guide (https://beta.nextjs.org/docs/upgrade-guide):

// app/page.js

async function getPosts() {
  const res = await fetch(`https://.../posts`, { next: { revalidate: 60 } });
  const data = await res.json();

  return data.posts;
}

export default async function PostList() {
  const posts = await getPosts();

  return posts.map((post) => <div>{post.name}</div>);
};

Alternatively, you can use the route segment config (https://beta.nextjs.org/docs/api-reference/segment-config#revalidate) to set the revalidation interval:

// app/page.tsx

export const revalidate = 60; // revalidate this page every 60 seconds

In addition to fetch, you can also revalidate data using cache (https://beta.nextjs.org/docs/data-fetching/caching#per-request-caching).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@last drum kapa.ai is still learning and improving, please let us how it did by reacting below

[last drum]

@inner meteor the route segment config doesn't work

[inner meteor]

Let me check the knowledge base for you again. One moment! :books:

---

I apologize for the confusion. It seems that the route segment config might not be the right solution for your use case. Instead, you can use the revalidate option with fetch() to set the cache lifetime of a resource (in seconds). Here's an example from the Next.js 13 Upgrade Guide (https://beta.nextjs.org/docs/upgrade-guide):

// app/page.js

async function getPosts() {
  const res = await fetch(`https://.../posts`, { next: { revalidate: 60 }});
  const data = await res.json();

  return data.posts;
}

export default async function PostList() {
  const posts = await getPosts();

  return posts.map((post) => <div>{post.name}</div>);
}

In addition to fetch, you can also revalidate data using cache (https://beta.nextjs.org/docs/data-fetching/caching#per-request-caching).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: