Hi,

I have a pretty simple web application, where one of the components relies on data from a server. I would like this to be revalidated every X seconds.

// MyComponent.tsx
async function fetchData(): Promise<Data> {
    const response = await fetch("...", { next: { revalidate: 60 } });
    // do some stuff with the response
    return data;
}

export default async function MyComponent() {
    const data = await fetchData();
    return <p>{data.whatever}</p>
}

// page.tsx
export default function Page() {
    return (
        <Suspense fallback={<p>loading...</p>}>
            <MyComponent />
        </Suspense>
    );
}

This works, for the most part. The user will be shown a cached response if they make a request within 60 seconds of the first fetch.

It doesn't really work how I would like for users who may be the one to trigger the revalidation however. If I am the first user to request once the cache has expired, I will still be sent the old content, and not receive the new content after the request has completed.

I would like for the user to receive the stale content at first, and once the fetch has completed, for the new content to be shown. This is not the case currently as the user will have to refresh after they trigger the revalidation to see the new content, which is expected as far as I'm aware.