I have a simple hobby project for a small gaming community. One of my pages has a list of recent matches played, and if you click on the name of a match it renders a modal with details about the match. This is implemented using intercepting/parallel routes, as described here:
https://nextjs.org/docs/app/api-reference/file-conventions/intercepting-routes#examples
The main table view is /matches, and the individual match view is /match/<id>.

Clicking the links works fine normally. It opens the modal as expected and updates the URL to be /match/<id>

The modal also includes a button that refresh the data from the game servers, and when that server action runs it calls updateTag("matches") to force the /matches page to re-render. The matches/page.tsx file includes

"use cache";
cacheLife("max");
cacheTag("matches");

at the top of the main async function.

As you can see in the attached video, refreshing the data does immediately update the /matches page behind the modal. However, as soon as I close the modal the page refreshes again. This can be seen in logs printed to the console. After clicking the Refresh button I see:

 GET /match/99bqt_uKRlG1oeDays-qgg 200 in 151ms (compile: 12ms, generate-params: 21µs, render: 139ms)
 GET /matches 200 in 315ms (compile: 3ms, render: 312ms)

And then after closing the modal I again see

 GET /matches 200 in 60ms (compile: 2ms, render: 58ms)

Is there any way to prevent this extra render? The flash is very jarring, and it is useless given that the page has already been updated. Any idea what I might be doing wrong here?