Hello all,
I'm fairly new to Next.js and have come across the following problem.

I have the following two components:

/app/tours/page.tsx

export default function Page() {
    return (
        <>
            <PageHeader title={"Search tours"} hideBackLink/>

            <Suspense fallback={<Loading/>}>
                <AllToursGrid/>
            </Suspense>
        </>
    )
}

/app/components/tours.component.ts

export async function AllToursGrid() {
    const result = await getAllTours();

    return (
        <div className="grid md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
            <MapArray
                data={result}
                mapFunction={(tour, index) => {
                    return <TourCard tour={tour} key={index}/>;
                }}
            />
        </div>
    )
}

I've added a timeout to the above server function getAllTours which waits about two seconds to test the loading animation. So far so good - everything works as expected. However, I wish to reload the data on every navigation (i.e. I switch to another page and back again and want the latest data being fetched again - and not cached data being displayed).

A (dirty) workaround I've found is to add a client component Refresher:

'use client'

export function Refresher() {
    const router = useRouter();

    useEffect(() => {
        router.refresh();
    }, []);

    return <></>;
}

which bypasses the problem, but it feels as though this isn't the most elegant solution at hand. Is there a possibility - without converting the entire component to a client component and using fetch to load the data every time the user navigates to this page? It might be that I'm going about this wrong in the first place, in which case I'd be happy to know as well :).

Thanks in advance!