With the new Next.js app/ router, forms can invoke functions on the server. However, if this function mutates some data that is currently shown to the user, they might not see an update straight away.

To fix this, we first ensure that any API endpoints (now referred to as Route Handlers) have the caching policy set. To do this using route segment configuration via export variables:

export const dynamic = 'force-dynamic'

When fetching data, we add on tags which we later use to tell Next.js that this fetch needs to refresh.

fetch('url', {
	next: {
		tags: ['tag1', 'tag2', 'tag3']
	}
})

To tell Next.js that a refresh has become necessary, we call revalidateTag() inside the route handler, passing the relevant tag (which is included on any fetch calls we wish to trigger to update).