How to Invalidate Router Cache Without Rerendering or Re-querying the Database?
Unanswered
Spectacled bear posted this in #help-forum
Spectacled bearOP
Context:
I'm using Next.js 15 with the App Router and unstable_cache to fetch data from my database. After editing a value via an input, I update the database and call revalidateTag to invalidate the cache. This triggers a page refresh to display the new data.
Problem:
The refresh works, but it causes two unwanted side effects:
- A full page rerender (bad for UX/performance).
- A re-execution of the database query during the rerender, even though the data was already updated.
My question:
Is there a way to invalidate the cache and update client-side data without triggering a full page rerender or redundant database queries?
- Goal: Keep the current UI state intact.
- Avoid: Unnecessary database calls after mutations.
Thanks for any insights!
I'm using Next.js 15 with the App Router and unstable_cache to fetch data from my database. After editing a value via an input, I update the database and call revalidateTag to invalidate the cache. This triggers a page refresh to display the new data.
Problem:
The refresh works, but it causes two unwanted side effects:
- A full page rerender (bad for UX/performance).
- A re-execution of the database query during the rerender, even though the data was already updated.
My question:
Is there a way to invalidate the cache and update client-side data without triggering a full page rerender or redundant database queries?
- Goal: Keep the current UI state intact.
- Avoid: Unnecessary database calls after mutations.
Thanks for any insights!
2 Replies
Dutch Smoushond
you can try something like optimistic ui, where you're optimistic that the write request on the db is successful, so you just update the state and also send the request to your server and then if it's successful nothing happens because your state already contains the updated data
If the request fails then you just revert back to the old state without the new data you added
If the request fails then you just revert back to the old state without the new data you added
Are you performing this mutation in a Server Action?
By doing so you maintain the client state and get the new Updated UI to blend with the existing UI.
By doing so you maintain the client state and get the new Updated UI to blend with the existing UI.