#difference between router.refresh and revalidatetag

1 messages · Page 1 of 1 (latest)

autumn pantherBOT
#

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

#

The router.refresh and revalidateTag methods in Next.js are used for different purposes related to data revalidation and cache management.

router.refresh is a method that clears the Router Cache and re-renders route segments on the server without invalidating the Data Cache or the Full Route Cache. This method is a client-side API and does not change the Data Cache and Full Route Cache. It's used when you want to make a new request to the server for the current route, effectively invalidating the Router Cache.

On the other hand, revalidateTag is a server-side function used to revalidate data on-demand by cache tag. When you call revalidateTag, it revalidates the Router Cache (if called in a Server Action), Full Route Cache, and Data Cache. This method is useful when you want to ensure that the data associated with a specific cache tag is up-to-date across all cache layers.

Here's a summary of their differences:

  • router.refresh: Clears the Router Cache and re-renders route segments on the server without invalidating the Data Cache or the Full Route Cache. It's a client-side API.
  • revalidateTag: Revalidates the Router Cache (if called in a Server Action), Full Route Cache, and Data Cache by cache tag. It's a server-side function.

For more detailed information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/caching#revalidatepath) and the Github discussion (https://github.com/vercel/next.js/issues/57451).

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

#

@smoky lantern kapa.ai is still learning and improving, please let us know how it did by reacting below

smoky lantern
#

@autumn panther is there any reason to use both together

autumn pantherBOT
#

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

#

Yes, there can be scenarios where you might want to use both router.refresh and revalidateTag together.

router.refresh is used to invalidate the client-side Router Cache and make a new request to the server for the current route. This is useful when you want to ensure that the user is seeing the most up-to-date version of a page after a client-side navigation.

On the other hand, revalidateTag is used to invalidate and re-fetch data associated with a specific cache tag across all cache layers (Data Cache, Full Route Cache, and Router Cache if called in a Server Action). This is useful when you have data that's shared across multiple pages (or routes) and you want to ensure that all instances of that data are up-to-date.

So, if you have a scenario where you've updated some data on the server and you want to ensure that both the current page (client-side Router Cache) and all other instances of that data (across all cache layers) are up-to-date, you might use both router.refresh and revalidateTag.

Here's a hypothetical example:

// In your server action
export async function action({ params, req, res }) {
  // Update some data on the server
  await updateData(params.id);

  // Revalidate the data associated with the 'data' cache tag
  await revalidateTag('data');

  // Then on the client-side, after calling the server action
  router.refresh();
}

In this example, revalidateTag('data') ensures that all instances of the 'data' cache tag are revalidated across all cache layers, and router.refresh() ensures that the current page is refreshed with the most up-to-date data.