I'm using the App router in v13 for the first time.

My page displays a list of components. They need to be editable, but will only occasionally be changed - so ideal for data-caching.

Following the documentation, my structure is:

* a server component <DataWrapper /> (see below) which fetches component data and passes it to
* a client component <UIWrapper /> which displays the component list

import 'server-only';
import UIWrapper from "./UIWrapper";

async function getData() {
    const res = await fetch(`${process.env.NEXT_URL}/api/component-info/getall`);

    if (!res.ok) {
        console.error('Failed to fetch data - error:\n', res);
        return [];
    }

    return res.json();
}


export default async function DataWrapper() {
    const data = await getData();

    return (
        <UIWrapper data={data} />
    )
}

When an edit is made in <UIWrapper />:

* the <UIWrapper /> fires a PUT to another api endpoint that updates the database
* the endpoint calls revalidatePath() on the getall route used in <DataWrapper />
* there's an artificial pause of 200ms before the enpoint returns
* on success, <UIWrapper /> calls router.refresh() to cause the page to update

All of which, as I understand from the docs, should mean that the data in <DataWrapper /> is refreshed and the updated info will show. in <UIWrapper />.

This does not work.

If I'm running in dev mode the endpoint updates (which I can see by calling it in a browser) but the UI doesn't. I can fix that by also adding a { next: { tags: [] } } to the fetch in <DataWrapper /> and calling revalidateTag alongside revalidatePath ...

... but with a build (so on Vercel) the only thing that works is adding a {cache: 'no-store' } to prevent the fetch being cached at all. Whilst that works, it's a huge waste of database time to constantly make calls when the data rarely changes.

So: am I missing something/going down the wrong path?!