#revalidation

1 messages · Page 1 of 1 (latest)

calm steppe
#

i'm calling a server action in a client component that has a revalidatepath('/game'). The client component is rendered in the server component page that renders the /game route . As the Game page is a server component, if fetches data directly from the server database and sends as props to the client component. If i am on the /game route and the server action runs and calls the revalidatepath('/game'), will the Game Page refetch server data automatically since we are still on the /game route? What happens in local development and in production build scenarios? Does the router.refresh need to be called to get the new data?

uneven tulipBOT
#

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

#

When you call a server action from a client component that invokes revalidatePath('/game'), and your /game page is a Server Component that fetches data directly from the server/database, here’s what happens:

  • In Production (App Router):
    If you are currently on the /game route and the server action calls revalidatePath('/game'), the cache for /game is invalidated. The next time the /game route is visited, it will fetch fresh data from the server/database. However, the page does not automatically refetch data and re-render immediately just because revalidatePath was called. The revalidation happens on the next navigation or refresh to that path, not instantly after the server action completes. If you want the new data to be fetched and rendered immediately while staying on the same route, you need to manually trigger a refresh on the client, typically using router.refresh() in your client component after the server action completes. This will cause the Server Component to re-fetch data and update the UI with the latest data from the server revalidatePath docs Incremental Static Regeneration.

  • In Local Development:
    The behavior is similar, but you may notice that caching and revalidation can behave less strictly due to development optimizations. Still, the cache is invalidated, and a new request to /game will fetch fresh data. You may need to trigger a navigation or use router.refresh() to see the updated data immediately.

#
  • Summary:
    • revalidatePath('/game') invalidates the cache for /game.
    • The page will only fetch new data on the next navigation or refresh.
    • To get new data immediately while staying on the same route, call router.refresh() after the server action completes.
    • This applies to both local development and production, though caching may be less strict in development.

References:

  • “Calling revalidatePath… revalidates the Data Cache, which in turn invalidates the Full Route Cache.” But: “Calling router.refresh will clear the Router cache, and re-render route segments on the server without invalidating the Data Cache or the Full Route Cache.” revalidatePath guide
  • “revalidatePath only invalidates the cache when the included path is next visited… The invalidation only happens when the path is next visited.” Docs: Recommendations to improve the revalidatePath docs
  • “If you want to force the app to immediately re-fetch the layout.tsx files, then call router.refresh().” Setting Cookies Via Server Action Reloads Entire App
  • “If you want the new data to be fetched and rendered immediately, you need to manually trigger a refresh on the client, typically using router.refresh() in your client component after the server action completes.” Incremental Static Regeneration

If you need the UI to update instantly after a mutation, always pair revalidatePath with a client-side router.refresh() call.

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

#

@calm steppe Kapa.ai is still learning and improving, please let me know how I did by reacting below.

calm steppe
#

but in my local development, the client component is receiving the new data without calling router.refresh

calm steppe
uneven tulipBOT
#

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

#

Sorry @calm steppe, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

calm steppe
uneven tulipBOT
#

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

#

The statement from the docs:

Server Functions: Updates the UI immediately (if viewing the affected path). Currently, it also causes all previously visited pages to refresh when navigated to again. This behavior is temporary and will be updated in the future to apply only to the specific path.

means that when you call revalidatePath inside a Server Action while you are currently viewing the affected path (e.g., /game), the UI will update immediately to reflect the new data. Additionally, as a temporary behavior, all previously visited pages in the client-side router cache will also be refreshed when you navigate back to them. This is not the intended long-term behavior—eventually, only the specific path you revalidated will be affected, and other cached pages will not be refreshed unless explicitly revalidated.

This is confirmed in the official documentation and in related discussions, which clarify that this broader cache invalidation is a temporary implementation detail and will be scoped more narrowly in the future revalidatePath API reference Docs: Recommendations to improve the revalidatePath docs GitHub Issue: Composing Server Functions that call revalidatePath.

So, in summary:

  • Current behavior: UI updates immediately for the affected path, and all previously visited pages are refreshed on revisit.
  • Future behavior: Only the specific path passed to revalidatePath will be affected.

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

#

@calm steppe Kapa.ai is still learning and improving, please let me know how I did by reacting below.

calm steppe
#

@uneven tulip based on this latest info, router.refresh is not needed as the UI gets updated with new data both in local and production environment?

uneven tulipBOT
#

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

#

Based on the latest information from the official Next.js documentation:

Server Functions: Updates the UI immediately (if viewing the affected path). Currently, it also causes all previously visited pages to refresh when navigated to again. This behavior is temporary and will be updated in the future to apply only to the specific path revalidatePath API reference.

This means that when you call revalidatePath inside a Server Action and you are currently viewing the affected path, the UI will update immediately with the new data. Therefore, you do not need to call router.refresh() to get the updated data in this scenario—this applies to both local development and production environments.

However, keep in mind that this is the current (temporary) behavior, and the implementation may change in the future to only affect the specific path, as noted in the docs.

Summary:

  • If you are on the affected path and call revalidatePath in a Server Action, the UI updates immediately—no need for router.refresh() revalidatePath API reference.
  • This applies in both local and production environments.

If you observe different behavior, it may be due to a bug or a specific caching edge case, but according to the official documentation, router.refresh() is not required in this scenario.

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