#Rebuild page after revalidatePath()

1 messages · Page 1 of 1 (latest)

fast pulsar
#

Hi! Can you give me a code example that will fetch data from the api every time its cache is validated? What I mean is that I'm making a blog page, and I also have an api that will call revalidatePath('/blog') every time we create a new post. I want this page to refresh, not only during testing (npm run dev) but also during build (npm run build)

copper arrowBOT
#

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

#

To fetch data from the API every time its cache is validated, you can use the fetch function with the cache: 'no-store' option. This will ensure that the data is fetched on every request, similar to getServerSideProps. Here's an example for your blog page:

// app/page.tsx
export default async function Page() {
  const res = await fetch('<https://api.example.com/posts',> {
    cache: 'no-store',
  });
  const posts = await res.json();

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

In this example, the fetch function is used to fetch the blog posts from your API with the cache: 'no-store' option. This will ensure that the data is fetched on every request, and the page will refresh when the cache is validated.

To trigger the revalidation, you can use the revalidatePath function in your API route that is called when a new post is created. Here's an example:

// app/api/create-post.js
import { revalidatePath } from 'next/cache';

async function createPost(postData) {
  // Your logic to create a new post
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const postData = req.body;
    await createPost(postData);
    await revalidatePath('/blog');
    res.status(200).json({ message: 'Post created and cache revalidated' });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

In this example, the revalidatePath function is called after creating a new post, which will trigger the revalidation of the /blog page.

#

Keep in mind that this approach will fetch the data on every request, which might not be the most efficient solution for a production environment. You might want to consider using Incremental Static Regeneration (https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) with a revalidate value to cache the data and revalidate it at specific intervals.

Sources:

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

#

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

fast pulsar
#

@copper arrow but fetch() have to be cached

copper arrowBOT
#

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

#

If you want to fetch data with caching and revalidate it at specific intervals, you can use the next.revalidate option in the fetch() function. This will set the cache lifetime of a resource (in seconds).

Here's an example for your blog page:

// app/page.tsx
export default async function Page() {
  const res = await fetch('<https://api.example.com/posts',> {
    next: { revalidate: 10 }, // Revalidate the data every 10 seconds
  });
  const posts = await res.json();

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

In this example, the fetch function is used to fetch the blog posts from your API with the next.revalidate option set to 10 seconds. This means the data will be cached and revalidated every 10 seconds.

To trigger the revalidation, you can use the revalidatePath function in your API route that is called when a new post is created. Here's an example:

// app/api/create-post.js
import { revalidatePath } from 'next/cache';

async function createPost(postData) {
  // Your logic to create a new post
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const postData = req.body;
    await createPost(postData);
    await revalidatePath('/blog');
    res.status(200).json({ message: 'Post created and cache revalidated' });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

In this example, the revalidatePath function is called after creating a new post, which will trigger the revalidation of the /blog page.